Sass ID 选择器在 React 和 create-react-library 中不起作用 [英] Sass ID selector isn't working in React and create-react-library

问题描述

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

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

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

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

这里有什么问题?它是 sass (我对它很陌生，顺便说一句，我安装了 node sass 所以它应该可以工作)还是其他什么?提前致谢.

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.

推荐答案

您可以重命名 scss 文件以从文件名中删除 module:

You can either rename your scss file to remove the module from file name:

import './styles.scss'

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

or if you want to use module pattern in your file name, do this:

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 的固有特性.

This behavior is usually implemented by bundlers like webpack, browserify etc. It is not an inherent feature of sass.

当你为你的 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; 
}

它解决了什么问题?

它通过添加moduleName 和唯一标识符 为您提供唯一的选择器(ID 和类名).这有助于您保持样式井井有条.

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.

文档 - 添加 css/scss 模块.

这篇关于Sass ID 选择器在 React 和 create-react-library 中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！