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
0
votes
1 answer

CSS Modules and React components, I feel like I am not using CSS modules correctly and my styles are clashing

So I have a search box component that is to be used in the Navigation bar on all pages of the site. I also want to use this component/html in other pages of the site hence I put it inside a component shown below LocationSearchBox.js import React,…
Foysal94
  • 565
  • 2
  • 7
  • 15
0
votes
1 answer

CSS Modules using Angular 2 without inline templates

I am trying to get CSS Modules working with Angular 2 without using inline templates. The official style guide also suggests not to use inline templates when you have more than 3 lines of markup. So my idea was to use a combination of…
LordTribual
  • 4,219
  • 2
  • 28
  • 38
0
votes
1 answer

How to use scss with css modules / postcss inside components

I'm failing to figure out how to setup my webpack in order to be able and use scss modules inside my components like: import styles from './ComponentStyles.scss' So far I tried configuring webpack to use sass-loader alongside postcss-loader but had…
Ilja
  • 44,142
  • 92
  • 275
  • 498
0
votes
2 answers

Get color of target html element in React

Trying to get the color of an html element using react, to pass to to my redux action/reducer. JSX
Event Handler handleClick(e){ const{dispatch} =…
Charlie-Greenman
  • 1,469
  • 1
  • 16
  • 36
0
votes
1 answer

How to use global stylesheet with css loader

I try to figure out how to import/require global css which includes styles for tags like body and so. I use css-loader + style-loader with extract text plugin.. I noticed the :global selector but didn't know where exactly I should put the global.css…
barbenezra
  • 47
  • 1
  • 10
-1
votes
1 answer

how do you access bem style selectors dynamically using css modules?

for example I have a following selector in App.module.css file: .Column--active and I would like to access this selector from App.js file in React using css modules. First I import all selectors from css file as import styles from…
esentai
  • 69
  • 1
  • 10
-1
votes
1 answer

How to remove menubar-button in PrimeReact's MenuBar?

I want a MenuBar with no hamburger button appearing while in responsive mode. I'm using CSS module to style my components. How can I completely remove hamburger menu button using CSS module? I can't find a way to access its specific HTML tag
Htet Oo Wai Yan
  • 113
  • 3
  • 12
-1
votes
1 answer

using 'fr' notation in css-template not working in firefox 82.0

I'm developing a website with a navigation bar and using autoprefixer for 'last 5 versions' compatibility. For positioning the elements inside the header I user grid-template. Something strange happens in firefox v.82.0 if I define the template…
sale108
  • 577
  • 7
  • 22
-1
votes
1 answer

A quick question about css modules and if I always need className

So I just encountered a bug that stumped me for a little bit using css modules in my react(cra) application and I was only able to solve it by looking at the style tags that get injected in the head from css modules my problem is in my…
INuke
  • 163
  • 1
  • 8
-1
votes
1 answer

How does array.push & array.join(' ') act differently with css modules?

A tutorial I'm following is using this method to change the color of a button dynamically: let buttonColor = [classes.Button] if (this.state.bool) { buttonColor.push(classes.Red) } return (
1 2 3
48
49