17

是否可以在 MUI 中设置所有Fields 的样式？Grid我已经知道如何在 css 中执行此操作，但在 jss 中找不到如何执行此操作我已经尝试过但无法正常工作：

const styles = {
  shopForm: {
    textAlign: 'center',
    Field: {
      width: '60%'
    }
  }
}

我应该如何改变styles？jss中可以使用这种样式吗？在 CSS 中曾经这样做过：

.shopForm Field
{...}

我正在使用 MUI

<Grid item lg={4} className={classes.shopForm}>
    <Field
        name="name"
        type="text"
        label="name"
        component={TextField}
    />
    <Field
        name="plaque"
        type="text"
        label="plaque"
        component={TextField}
    />
    <Field
        name="unit"
        type="text"
        label="unit"
        component={TextField}
    />
    <Field
        name="text"
        type="text"
        label="text"
        component={TextField}
        multiline
        row={3}
    />
</Grid>
4

3 回答 3

37

一段时间后找到某种答案！样式Field组件本身是不可能的，因为它是由其他元素组成的，但是您可以对 materialUI 组件内部的元素进行样式设置：

shopForm: {
    textAlign : 'center',
'& input' :{
    width: '60%',
    color:'grey'
   },
'& label':{
  fontSize:'15px'
}

因此，您必须先找到要设置样式的元素，然后再将样式赋予父类。

<Grid 
  item
  lg={4}
  className={classes.shopForm}
>
  <Field
    name="name"
    type="text"
    label="name"
    component={TextField}
  />
  <Field
    name="plaque"
    type="text"
    label="plaque"
    component={TextField}
  />
  <Field
    name="unit"
    type="text"
    label="unit"
    component={TextField}
  />
  <Field
    name="text"
    type="text"
    label="text"
    component={TextField}
    multiline
    row={3}
  />
</Grid>

更新

因为我在任何地方都没有找到答案，所以在其他类中设置类的样式（仅当类来自类对象时才有效）

parentClass:{
   ...styling 
           '& $childClass': {
               ...styling 
        },

        // in my case I needed psuedo-class
           '&:hover': {
               '& $childClass': {
                   ...styling 
            },}
}

如果子类不是来自 material-ui 类并且是字符串

  parentClass:{
           '& .childClass': {
               ...styling 
        },

}
于 2018-09-12T06:24:35.033 回答
1

你可以这样尝试

//create a css what you want 
const styles = {
      shopForm: {
       textAlign : 'center',
     },
     field :{
        width: '60%'
     }
}

 <Grid item lg={4} style={styles.shopForm}>
     <Field
        name="name"
        type="text"
        label="name"
        component={TextField}
        style={styles.field} //add the style to the Field
      />
 <Grid >
于 2018-05-16T10:42:44.350 回答
-2

您可以将 classNames 添加到字段并添加 CSS：

<Grid item lg={4} className={classes.shopForm}>
    <Field
        className="grid-field"
        name="name"
        type="text"
        label="name"
        component={TextField}
    />
    <Field
        className="grid-field"
        name="plaque"
        type="text"
        label="plaque"
        component={TextField}
    />
    <Field
</Grid>

并制作一个普通的css文件：

.grid-field {
    font-size: 20px;
}
于 2018-09-11T14:09:09.523 回答