Question

我正在使用Material UI组件，但希望将所有样式移到.scss文件中。目前，我在同一javascript文件中有一个大型样式对象，我使用Material UI组件。此样式对象通过style prop传递给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文件中的类并将其弹出到材质UI组件

Answer 1

我没有押韵或理由为什么它现在开始工作而不是之前我曾尝试过，但是如果我的DbContext文件包含类似于：{/ p>

flex: 1

总之，直接在MATERIAL UI组件中使用<ScrollView> // A ScrollView <View><Text>Hello</Text></View> <View><Text>Hello</Text></View> <View><Text>Hello</Text></View> <View><Text>Hello</Text></View> <View> <ScrollView contentContainerStyle={{flex:1}}> // B ScrollView <View><Text>Hello</Text></View> <View><Text>Hello</Text></View> <View><Text>Hello</Text></View> <View><Text>Hello</Text></View> </ScrollView> </View> </ScrollView> prop可以正常工作。因此，使用我的问题中的示例代码，以下工作：

className="someClassInTheSCSSFile"

现在，实际上真正有趣（并且令人失望）的是你想要将值传递给CSS。例如，假设此.scss组件具有//.scss file .someClassInTheSCSSFile { color: blue; //rest of the styles go here }属性，但我不想将其硬编码到我的className文件中。坚持我不使用任何内联样式的模式，这提出了挑战。让我们说这个//Javascript file <TableRowColumn key={index} className="someClassInTheSCSSFile"> <span className="checkbox-thing"> <input .... /> </span> </TableRowColumn>组件位于一个带有名为TableRowColumn的参数的函数中。调用该函数时，我希望将此width值动态传递到此.scss组件的css TableRowColumn属性中。然而，就我所知，这最终成为一项不可能完成的任务。可以做的是：

colWidth

但这是内联样式。正是我试图避免的。所以现在，我最终同时具有内联样式和引用我的colWidth文件的width。可能更笨重和负担。如果我在TableRowColumn内使用//Javascript File <TableRowColumn key={index} style={{width:`${coldWidth}`}} className="someClassInTheSCSSFile"> <span className="checkbox-thing"> <input .... /> </span> </TableRowColumn>函数怎么样？好吧，根据MDN（https://developer.mozilla.org/en-US/docs/Web/CSS/attr），这只会支持Strings传递，主流浏览器不支持所有其他类型。哎哟。有关此操作的示例，请参阅此codepen（https://jsfiddle.net/hmr0hckf/131/）。故事的道德，我坚持使用内联样式的任何css属性，我想动态改变价值。

Answer 2

带有node-sass和sass-loader的Webpack

你非常接近。像往常一样，将所有样式放入一个或多个.scss文件中。例如，一个名为＆＃34; nodeContent。＆＃34;

的类

.nodeContent {
   position: absolute;
   top: 0;
   bottom: 0;
   display: flex;
   align-items: center;
}

您需要做的就是导入样式并访问类名作为样式对象的属性。请参阅下面的示例，我在与我的组件相同的目录中有一个名为styles.scss的Sass文件。在我的组件中，我可以像这样导入它们：

import * as styles from './styles.scss'

样式是一个对象，我可以引用我的类，就像我对象的任何其他属性一样。因此，如果我想在材质组件上使用nodeContent类，我可以这样做：

<Card className={styles.nodeContent} />

不使用webpack（不是100％肯定）

我认为您可以将.scss文件编译为.css并在index.html文件中引用它们。在那之后，我认为你应该能够将classNames引用为如上所示的字符串。这里我刚刚阅读的文章类似，只是在他们的组件中导入css文件：https://hackernoon.com/using-sass-with-create-react-app-without-ejecting-b5f4f827ed9e

使用SASS类覆盖Material UI组件

2 个答案:

带有node-sass和sass-loader的Webpack

不使用webpack（不是100％肯定）