Question

我正在尝试从 SCSS 文件导入一些样式，并将它们用作 Material UI 的 useStyles 函数的输入，以定义利用 SCSS 变量的本地样式。例如：

style.scss

@import 'some.scss';
.button {
      @include someImportedSCSS;
      font-size: 1rem;
      width: 8rem;
      height: 2.4rem;
      etc;
}

mycomponent.tsx

import other things;
import {Button} from "@material-ui/core";
import { makeStyles } from '@material-ui/core/styles';
import * as style from 'style.scss';
const useStyles = makeStyles(style);
...
export const SearchButton = ({ onClick }) => { 
  const classes = useStyles();
  return (
  <Button classes={{root: classes.button}}
    variant="contained"
    onClick={onClick}
  >
    SEARCH
  </Button>)
}

但是，它没有正确应用样式。在检查导入的“样式”对象后，我意识到它似乎没有正确导入 scss。样式对象如下所示： style = {button: "button__search-button-style___1tScs"} 表示“按钮”只是一个字符串而不是一个对象，其属性是 scss 中定义的样式。我不确定我可能错过了什么 - 我很感激这里的任何帮助。

将 .scss 与 Material UI makeStyles 一起使用

0 个答案: