Sass ID 选择器在 React 和 create-react-library 中不起作用

Question

我有一个正在用一个Header组件和一个Button组件制作的库。我给了他们 ID 以在我的 SASS 文件中识别他们，这是我目前的情况：

索引.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;
}

那是行不通的。但是，当我将 scss 文件中的 ID 选择器替换为 HTML 中的元素名称（按钮、h1）时，它会起作用：

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;
}

这里有什么问题？是 sass （我对它还很陌生，顺便说一句，我安装了节点 sass 所以它应该可以工作）还是其他什么？提前致谢。

Answer 1

您可以重命名scss文件以删除module文件名：

import './styles.scss'

或者，如果您想module在文件名中使用模式，请执行以下操作：

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

并以这种方式提供id/class ：

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>
}

此行为通常由 webpack、browserify 等捆绑器实现。它不是sass的固有功能。

当您在 sass 中使用此模块模式时，生成的样式表大致如下所示：

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

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

它解决什么问题？

moduleName它通过添加唯一的标识符为您提供唯一的选择器（ID 和类名）。这可以帮助您保持样式的组织和分离。

文档 - 添加 css/scss 模块。