在reactjs中为所有相同类型的组件设置样式属性

Question

我开始使用ReactJS和MaterialUI，并且努力了解样式与使用CSS有何不同。

我的意思是，在CSS中，您可以为所有输入或选择元素定义全局规则，但是在ReactJS中，您似乎无法做到这一点，必须将类一次传递给所有元素。我确定我缺少了一些东西，但是我还没有发现。

例如，如果我在一个Form中有10个TextField（实际上我正在使用react-admin的TextInput），我希望其中的10个具有相同的宽度，而不必声明style对象，使用withStyles(style) HOC传递它，并一一设置className={classes.input}。

Answer 1

简短的答案是-在这里没有一种简单的方法可以完成您想要的事情。

您有几种选择：

只需将类添加到您的每个组件中

const MyForm = ({classes}) => (
<Form> 
   <TextInput className = {classes.textInput} /> 
   <TextInput className = {classes.textInput}/> 
   <TextInput className = {classes.textInput}/>     
</Form> 
)

const styles = {
    textInput: {
       color: "red" 
    }
}

其缺点是它是重复性的。

直接使用嵌套选择器设置dom元素输入的样式

const MyForm = ({classes}) => (
<Form className={classes.root}> 
   <TextInput/> 
   <TextInput/> 
   <TextInput/>     
</Form> 
)

const styles = {
    root: {
        "& input" {
            color: "red", 
        }
    }
}

这里将直接设置input dom元素的样式-而不是React组件本身。不利的一面是，您可能最终会为您不想使用的输入设置样式。但是，我发现这是进行样式表等操作的最佳方法。

创建自己的高阶组件库来包装Material-UI组件

查看此Software Engineering question of mine.

const MyTextInput = ({classes, ...rest}) => (
    <TextInput className = {classes.root} ...rest/> 
)

const styles = {
    root: {
       color: "red", 
    }
}

const MyForm = ({classes}) => (
    <Form> 
       <MyTextInput/> 
       <MyTextInput/> 
       <MyTextInput/>     
    </Form> 
); 

这看起来好像是不必要的样板，但从长远来看，我认为-对于将要存在一段时间的项目来说，这是最好的方法-就在整个应用程序中保持一致的设计架构而言。