html - 用 SASS 类覆盖 Material UI 组件

Question

我正在使用 Material UI 组件，但想将我所有的样式移动到一个 .scss 文件中。目前，我在使用 Material UI 组件的同一 javascript 文件中有一个大型样式对象。此样式对象通过 style 属性传递给 Material UI 组件。正如我所见，这或多或少只是内联样式，我的目标是消除这种模式。我在这些 Material UI 组件中还有其他嵌套组件(Material UI 以及自定义 React 组件)。这是我正在使用的示例:

 const styles= {//all my css styles in here}

<TableRowColumn key={index} style={styles.column}>
     <span className="checkbox-thing">
       <input
         ....
       />
     </span>
</TableRowColumn>

我引用了覆盖文档:https://material-ui-next.com/customization/overrides/

以及这个 Stack Overflow 问题:How to style material ui next components with styled components and SASS

在我看来，这两个都没有说明如何使用外部 .scss(样式所在的位置)并将该文件中的类名引用到 Material UI 组件中.我只是想能够做这样的事情，目前用普通的 HTML 元素很容易完成:

<input   
    type="checkbox"
    checked={
      this.props.isChecked
    }
    className="someClassInTheSCSSFile"
/>

总而言之，我想:

• 将我的大型样式对象删除到单独的类中，放入 .scss 文件中

• 引用.scss 文件中的类并将其弹出到 Material UI 组件中

Answer 1

我不知道为什么现在开始工作而不是我以前尝试过的时候，但是使用 className="someClassInTheSCSSFile" 最终工作提供了我的 .scss 文件包含类似于以下内容的内容:

//.scss file

.someClassInTheSCSSFile {
   color: blue;
   //rest of the styles go here
}

总而言之，直接在 MATERIAL UI 组件中使用 className 属性是可行的。因此，使用我的问题中的示例代码可以实现以下效果:

//Javascript file

<TableRowColumn key={index} className="someClassInTheSCSSFile">
 <span className="checkbox-thing">
   <input
     ....
   />
 </span>
</TableRowColumn>

现在，真正有趣(和令人失望)的是当您想要将值传递给 CSS 时。例如，假设这个 TableRowColumn 组件有一个 width 属性，但我不想将它硬编码到我的 .scss 文件中。坚持我不使用任何内联样式的模式，这是一个挑战。假设此 TableRowColumn 组件位于一个函数内，该函数采用名为 colWidth 的参数。调用函数时，我想将此 colWidth 值动态传递到此 TableRowColumn 组件的 css width 属性中。然而，据我所知，这在目前是一项不可能完成的任务。可以做的是:

//Javascript File

<TableRowColumn key={index} style={{width:`${coldWidth}`}} className="someClassInTheSCSSFile">
 <span className="checkbox-thing">
   <input
     ....
   />
 </span>
</TableRowColumn>

但这是内联样式。正是我试图避免的。所以现在，我最终得到了内联样式和一个引用我的 .scss 文件的 className。可以说更笨重和繁重。如果我在 .scss 中使用 attr() 函数怎么样？好吧，根据 MDN(https://developer.mozilla.org/en-US/docs/Web/CSS/attr)，这将仅支持传递的字符串，主流浏览器不支持所有其他类型。哎哟。请参阅此代码笔 ( https://jsfiddle.net/hmr0hckf/131/ ) 以获取实际操作示例。这个故事的寓意是，对于我想要动态更改值的任何 css 属性，我坚持使用内联样式。