Stack Overflow
Stack Overflow

Questions tagged [css-modules]

CSS Modules is a pre-processor that allows for emulation of local scope and control dependencies in CSS code.

CSS Modules is a CSS pre-processor that allows for scoping of CSS classes in a local or global context. It works in tandem with JavaScript to generate CSS classes, and requires a loader (such as Webpack or Browserify).

Read the documentation for CSS Modules here.

730 questions
26
votes
3 answers

css-loader localIdentName: is a hash necessary for uniqueness?

The css-loader README suggests that localIdentName be set to '[path][name]__[local]--[hash:base64:5]' Is the hashing suffix necessary? Would it still be unique as this? '[path][name]__[local]' Why or why not? The fact that #3 is an option in this…
Scotty H
  • 6,432
  • 6
  • 41
  • 94
26
votes
2 answers

CSS module hover styles when inside another module

In a React/Webpack app with CSS modules I have a module .card in its own .scss file and another module named .stat which is a content to be shown in the .card. What I need to achieve the following, but int the 'css-modules' way: .card:hover .stat…
Spadar Shut
  • 15,111
  • 5
  • 47
  • 54
25
votes
5 answers

vs code and intellisense for CSS Grid and CSS Modules

I am using VS code for a project using CSS Grid and CSS Modules. However when I try something like this .loginRegisterDiv { composes: loginDiv; margin: 0px; width: 100%; } I get an error saying composes "unknown property" for composes. Plus…
tmp dev
  • 8,043
  • 16
  • 53
  • 108
24
votes
3 answers

How I can use refs to change styling class in ReactJS?

I'm trying to change background of a div when color value changes. Here is my function which receives color value: ChangeColor(oColor) { this.props.ChangeColor(oColor); console.log("Refs: ", this.refs.colorPicker.className); }, Here is…
Muhammad Ateeq Azam
  • 1,009
  • 1
  • 12
  • 26
22
votes
2 answers

How to style child components in React with CSS Modules

I'm using React with SASS and CSS Modules. How can I style the children component without passing a new ClassName or something like that. For Ex. I want to position or do some styles over the child components, without having to give a specific…
k3b
  • 341
  • 1
  • 2
  • 4
22
votes
2 answers

CSS Modules - referencing classes from other modules

I have understood the concept of CSS modules so much that I am convinced that I do not want to do anything else that that for the future. Currently I am trying to refactor an existing app to use CSS modules, the app has used classic sass with BEM…
hurrtz
  • 1,871
  • 1
  • 19
  • 34
22
votes
8 answers

using css modules, how can I import classes from a file

I am using css modules for my project, and I have a file positioning.css which has some useful classes that I want to import. e.g. .right, .left What is the best approach for this using CSS Modules? At the moment I can see 2 options, but they are…
svnm
  • 22,878
  • 21
  • 90
  • 105
20
votes
3 answers

react-select dropdown opens inside modal

I have a custom modal where I have 2 react-select components inside. The modal body is ready to auto scroll in case the content exceeds its size, but the react-select components dropdown open inside the modal with this overflow, which is what i am…
RCohen
  • 1,702
  • 10
  • 24
  • 44
20
votes
3 answers

Can I use css-modules with LESS + nesting?

The documentation on css-modules is pretty sparse, so I'm not sure if I can do this or not. This article says the way I'd style a button with normal and error states would look like this: .common { /* font-sizes, padding, border-radius */ } .normal…
mpen
  • 272,448
  • 266
  • 850
  • 1,236
18
votes
3 answers

CSS Modules: How do I disable local scope for a file?

I'm using CSS Modules (through Webpack css loader) in a new React project, and even though it's working great, I'm having trouble getting the SCSS for React Select to work. I imagine this is because it tries to create local classNames, which the JS…
Steven
  • 1,566
  • 2
  • 16
  • 38
16
votes
1 answer

Use tailwind @apply in CSS modules in Next.js

I've setup tailwind with my Next.js site as per the official guide here: https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs However, when I try and use the @apply method, in a CSS module on a component level, eg: .container { …
bravokiloecho
  • 1,413
  • 5
  • 22
  • 39
16
votes
3 answers

Create-react-app + TypeScript + CSS Modules: Auto-generating type definitions without ejecting from CRA

Problem create-react-app v2+ supports TypeScript and CSS Modules out of the box... separately. The problem arises when you try to use the two together. Facebook had an extensive discussion about this issue and ultimately closed it off on GitHub. So…
AlexH
  • 1,087
  • 2
  • 10
  • 29
16
votes
3 answers

CSS Modules - exclude class from being transformed

I'm using CSS modules and by far everything was working great. We started to use external UI library along with our own one, so I'm writing components like this:
Assuming…
mdmb
  • 4,833
  • 7
  • 42
  • 90
16
votes
3 answers

Update CSS Module variables from Javascript

I'm using a (now older) version of react-boilerplate which came with CSS Modules. What's nice about them is that you can create variables and import them in other CSS files. Here's my colors.css file :root { /* Status colors */ --error:…
NateW
  • 2,856
  • 5
  • 26
  • 46
16
votes
1 answer

using css modules in react how can I pass a className as a prop to a component

If I have a react component and I want to pass in a className, how do I do this with CSS Modules. It currently just gives the className but not the hash generated css module name which I would get for
svnm
  • 22,878
  • 21
  • 90
  • 105
1
2
3
…
48 49