class MUI 内的样式元素
Styling element inside class MUI
是否可以在 MUI 中为 Grid
内的所有 Field
设置样式?
我已经知道如何在 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>
你可以这样试试
//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 >
您可以将类名添加到字段并添加 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;
}
一段时间后找到某种答案!
样式化 Field
组件本身是不可能的,因为它是由其他元素组成的,但是您可以样式化 materialUI 组件内部的元素:
shopForm: {
textAlign : 'center',
'& input' :{
width: '60%',
color:'grey'
},
'& label':{
fontSize:'15px'
}
所以你必须先找到你想要设置样式的元素,然后再给 parent 的 class 设置样式。
<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>
更新
因为我在任何地方都找不到答案,所以要在其他 class 中设置 class 的样式(仅当 class 来自 classes object)
parentClass:{
...styling
'& $childClass': {
...styling
},
// in my case I needed psuedo-class
'&:hover': {
'& $childClass': {
...styling
},}
}
并且如果 child class 不是来自 material-ui classes 并且是字符串
parentClass:{
'& .childClass': {
...styling
},
}
是否可以在 MUI 中为 Grid
内的所有 Field
设置样式?
我已经知道如何在 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>
你可以这样试试
//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 >
您可以将类名添加到字段并添加 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;
}
一段时间后找到某种答案!
样式化 Field
组件本身是不可能的,因为它是由其他元素组成的,但是您可以样式化 materialUI 组件内部的元素:
shopForm: {
textAlign : 'center',
'& input' :{
width: '60%',
color:'grey'
},
'& label':{
fontSize:'15px'
}
所以你必须先找到你想要设置样式的元素,然后再给 parent 的 class 设置样式。
<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>
更新
因为我在任何地方都找不到答案,所以要在其他 class 中设置 class 的样式(仅当 class 来自 classes object)
parentClass:{
...styling
'& $childClass': {
...styling
},
// in my case I needed psuedo-class
'&:hover': {
'& $childClass': {
...styling
},}
}
并且如果 child class 不是来自 material-ui classes 并且是字符串
parentClass:{
'& .childClass': {
...styling
},
}