Sass ID selector isn't working in React and create-react-library

问题

I have a library I'm making with a Header component and a Button component. 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.com/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.

回答1:

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.

来源：https://stackoverflow.com/questions/61849452/sass-id-selector-isnt-working-in-react-and-create-react-library

标签

javascript

reactjs

Sass