Question

是否可以在material-ui中为Field内的所有Grid设置样式？我已经知道如何在CSS中做到这一点，但我无法在jss中找到如何做到这一点我试过这个但没有工作：

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

我该如何更改styles？这种风格可以在jss中使用吗？在css过去这样做：

 .shopForm Field
{...}

我正在使用material-ui

<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>

Answer 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 >

Answer 2

您可以将className添加到字段中并添加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;
}

类材料ui中的造型元素

2 个答案: