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

【问题标题】：Sass ID selector isn't working in React and create-react-librarySass ID 选择器在 React 和 create-react-library 中不起作用
【发布时间】：2020-09-03 01:30:13
【问题描述】：

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

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

这是行不通的。但是，当我将我的 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（我对它很陌生，顺便说一句，我安装了 node sass 所以它应该可以工作）还是其他什么？提前致谢。

【问题讨论】：

标签： javascript reactjs sass

【解决方案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 和类名）。这可以帮助您保持样式井井有条并分开。

Docs - add css / scss modules。

【讨论】：

【解决方案2】：

我遇到了同样的问题。我正在使用带有模块模式的 scss 文件。

我能找到的最简单的解决方案是使用属性选择器。

这不起作用：

#myID {
   color: red;
}

我在 module.scss 文件中使用下面的代码而不是上面的代码并工作：

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

【讨论】：