当前位置 : 主页 > 网页制作 > css >

css – 类材料ui中的样式元素

来源:互联网 收集:自由互联 发布时间:2021-06-13
是否可以在材质中为网格内的所有字段设置样式-ui? 我已经知道如何在CSS中做到这一点,但我无法在jss中找到如何做到这一点 我试过这个但不行: const styles = { shopForm: { textAlign : 'cente
是否可以在材质中为网格内的所有字段设置样式-ui?
我已经知道如何在CSS中做到这一点,但我无法在jss中找到如何做到这一点
我试过这个但不行:

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

我该如何改变风格?
这种风格可以在jss中使用吗?
在css过去这样做:

.shopForm Field
{...}

我正在使用材料-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>
一段时间后找到某种答案!
样式字段组件本身是不可能的,因为它由其他元素组成,但您可以设置在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>
网友评论