I have a library I'm making with a Header ponent and a Button ponent. I gave them ID's to identify them in my SASS file, this is my current situation:

index.js:

import React from 'react'
import './styles.module.scss'

export const Button = ({text, bgColor, textColor, fontFamily}) => {

  return <button id="button" style={
    {backgroundColor: [bgColor],
    color: [textColor],
    fontFamily: [fontFamily]}
  }>{text}</button>
}

export const Header = ({text, size, fontFamily, textColor}) => {
  return <h1 style={{
    fontSize: [size],
    fontFamily: [fontFamily],
    color: [textColor]
  }} id="header">{text}</h1>
}

export const subHeader = () => {
  return null
}

styles.module.scss:

@import url(':wght@300;400;500;700&display=swap');
$font: 'Montserrat',
sans-serif;
$blue: #1778f2;
#button {
    background: $blue;
    border: none;
    color: white;
    padding: 1em 2em;
    border-radius: 10px;
    font-family: $font;
    font-weight: 500;
    font-size: 1.2em;
    line-height: .8em;
    cursor: pointer;
    &:focus {
        outline: none;
    }
}

#header {
    font-family: $font;
    margin: 0;
    font-size: 3em;
}

That's isn't working. However, when I replace the ID selectors in my scss file to the element names in HTML (button, h1), it works:

button {
    background: $blue;
    border: none;
    color: white;
    padding: 1em 2em;
    border-radius: 10px;
    font-family: $font;
    font-weight: 500;
    font-size: 1.2em;
    line-height: .8em;
    cursor: pointer;
    &:focus {
        outline: none;
    }
}

h1 {
    font-family: $font;
    margin: 0;
    font-size: 3em;
}

What's the problem here? Is it the sass (I'm pretty new to it, BTW I installed node sass so It should work) or something else? Thanks in advance.

I have a library I'm making with a Header ponent and a Button ponent. I gave them ID's to identify them in my SASS file, this is my current situation:

index.js:

import React from 'react'
import './styles.module.scss'

export const Button = ({text, bgColor, textColor, fontFamily}) => {

  return <button id="button" style={
    {backgroundColor: [bgColor],
    color: [textColor],
    fontFamily: [fontFamily]}
  }>{text}</button>
}

export const Header = ({text, size, fontFamily, textColor}) => {
  return <h1 style={{
    fontSize: [size],
    fontFamily: [fontFamily],
    color: [textColor]
  }} id="header">{text}</h1>
}

export const subHeader = () => {
  return null
}

styles.module.scss:

@import url('https://fonts.googleapis./css2?family=Montserrat:wght@300;400;500;700&display=swap');
$font: 'Montserrat',
sans-serif;
$blue: #1778f2;
#button {
    background: $blue;
    border: none;
    color: white;
    padding: 1em 2em;
    border-radius: 10px;
    font-family: $font;
    font-weight: 500;
    font-size: 1.2em;
    line-height: .8em;
    cursor: pointer;
    &:focus {
        outline: none;
    }
}

#header {
    font-family: $font;
    margin: 0;
    font-size: 3em;
}

That's isn't working. However, when I replace the ID selectors in my scss file to the element names in HTML (button, h1), it works:

button {
    background: $blue;
    border: none;
    color: white;
    padding: 1em 2em;
    border-radius: 10px;
    font-family: $font;
    font-weight: 500;
    font-size: 1.2em;
    line-height: .8em;
    cursor: pointer;
    &:focus {
        outline: none;
    }
}

h1 {
    font-family: $font;
    margin: 0;
    font-size: 3em;
}

What's the problem here? Is it the sass (I'm pretty new to it, BTW I installed node sass so It should work) or something else? Thanks in advance.

• javascript
• reactjs
• sass

2 Answers 2

You can either rename your scss file to remove the module from file name:

import './styles.scss'

or if you want to use module pattern in your file name, do this:

import styles form './styles.module.scss'

And provide id / class in this manner:

export const Button = ({text, bgColor, textColor, fontFamily}) => {

  return <button id={styles.button} style={ // or className={styles.myClass1}
    {backgroundColor: [bgColor],
    color: [textColor],
    fontFamily: [fontFamily]}
  }>{text}</button>
}

export const Header = ({text, size, fontFamily, textColor}) => {
  return <h1 style={{
    fontSize: [size],
    fontFamily: [fontFamily],
    color: [textColor]
  }} id={styles.header}>{text} // or className={styles.myClass2}
  </h1>
}

This behavior is usually implemented by bundlers like webpack, browserify etc. It is not an inherent feature of sass.

When you use this module pattern for your sass, the generated stylesheet looks vaguely like this:

.moduleName_className__someUniqueId { // for classes
  color: red; 
}

#.moduleName_myId__someUniqueId { // for IDs
  color: blue; 
}

What problem does it solve?

It provides you unique selectors (IDs and classnames) by adding moduleName and a unique identifier with them. Which helps you keep your styles organized and separated.

Docs - add css / scss modules.

I came across the same problem. I am using scss files with module pattern.

The simplest solution I could find is using attribute selector.

This does not work:

#myID {
   color: red;
}

Instead of above code I used below in my module.scss file and worked:

h1[id="myID"] {
   color: red;
}