-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CSS Modules #1324
Comments
If you use CSS Modules you should import the css inside your main.css/scss file inside a :global switch.
|
|
@alex-shamshurin what is the styles parameter in your case, please? Any default react-select styling? I would really appreciate if you could share with us a more detailed example. |
Import for 'styles' is missed there. It's just a my own styles which are used together with selectStyles |
I'm not able to get this to work for some reason. I have a stylesheet for my Dropdown component, and inside I have:
This works fine in my DatePicker component that uses react-datepicker:
I don't get any errors, but no styles are appearing. |
@Tenkir I ended up by setting up different loader rules for css modules and global styles in my webpack config file. I'm not using :global at all. I copied the css file into my project (I made a custom design so it was easier for me to do it in this way). Then I just import the css file into my js file (the same way as the example above from Alex) |
different configs for with css modules and without. this is for stylus, but the same is for pure css or sass
|
It shouldn't matter what you loader config is for SCSS/Stylus/etc, since it's already compiled into CSS. I'm using PostCSS. With PostCSS-Import. But again, I've tested this same system with other node packages and it works fine. |
|
the difference is you turn off modules for global css: modules: true/false |
This really shouldn't be necessary though. Adding the |
Hello guys, I solved this problem by importing the react-select css like this in my js: You need to add the I found this solution here. |
@Neddz this isn't working for me. Getting an error
|
You could also just import it from the node modules in your component file like this: and then on the bottom export it together with the component styles like this: I hope this will help! |
My styles are importing properly, and I see the output CSS containing the postfixed classes for the component. However, using the component doesn't actually parse classes on the created elements - I see "plain" classes such as "Select--single" and "is-clearable". What am I missing? I imported the module using: import Select, { Option } from 'react-select' and I tried all the various methods mentioned both here and in #176, including webpack config changes and Any ideas? |
You can also use an
|
Looks like this is resolved. Please comment if this is still a concern, and needs to be re-opened. |
Does this all still apply with react-select v2 and above? Specifically what is painfully missing from the react-select docs is an example that uses custom styles with CSS Modules. The docs claim that CSS Modules are supported: https://react-select.com/styles#using-classnames but that does not seem to be the case, because a prefix is simply not good enough for CSS Modules: the class names are compiled into something different for use at run time. I am able to get around this by using the Please update the docs to provide an example using CSS Modules and |
Agreed on better documentation for CSS Modules + One CSS based solution I found was to add something like this to my component:
and then within the corresponding stylesheet, add CSS like so:
Your CSS will technically still be modularly scoped under the parent element. Not ideal, but a solution. |
oh, just like /deep/ syntax in vue <style scoped>,but I couldn't find any docs about the |
@ron0115 it's an attribute selector in CSS so You can check out more here: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors |
I had these lines at the top of my file:
but the select was showing up un-styled. I made a subtle change in my webpack config file by changing this line:
{test: /\.css$/, loader: 'style!css?modules!postcss'}
to this:
{test: /\.css$/, loader: 'style!css!postcss'}
and now it works.
Does that mean I cannot use css modules with React-Select?
The text was updated successfully, but these errors were encountered: