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

IT技术 javascript reactjs sass
2021-05-15 15:06:04

我有一个库，我正在用一个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
}

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

2个回答

您可以重命名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 使用这个module模式时，生成的样式表看起来像这样：

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

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

它解决什么问题？

它通过添加为您提供独一无二的选择（ID和类名）moduleName和一个唯一的标识符与他们。这有助于您保持样式有条理和分开。

文档 - 添加 css/scss module。

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

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

这不起作用：

#myID {
   color: red;
}

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

h1[id="myID"] {
   color: red;
}
其它你可能感兴趣的问题
上一篇对像 MERN Stack 这样的 web 和 api 解决方案进行身份验证和授权的最佳方法是什么？ 下一篇双挤出机中没有 Z 跳跃，打印在回缩点受到干扰