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

Question

我有一个使用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
}

样式.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 所以它应该可以工作）还是其他什么？提前致谢。

标签： javascriptreactjssass

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 模块。