我有一个正在制作的图书馆Header
组件和一个Button
成分。我给了他们 ID 以在我的 SASS 文件中识别他们,这是我目前的情况:
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
}
样式.模块.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 所以它应该可以工作)还是其他什么?提前致谢。