MUI类中的样式元素[重复]
Posted
技术标签:
【中文标题】MUI类中的样式元素[重复]【英文标题】:Styling element inside class MUI [duplicate] 【发布时间】:2018-10-26 08:42:15 【问题描述】:是否可以在 MUI 中为 Grid
内的所有 Field
s 设置样式?
我已经知道如何在 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>
【问题讨论】:
你有 CSS 文件吗? 我有 scss 文件 @liam 但我的主要问题是我可以像 css 方式那样做吗 【参考方案1】:一段时间后找到某种答案!
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
,
【讨论】:
非常有帮助的答案【参考方案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;
【讨论】:
我想避免给每个字段上课,只给网格上课 我想你将不得不编写类似.grid > div > div
的样式,这不是很有效(依赖于内容,用于标签选择的 css 等)。在 html 中,通常的做法是为每个要设置样式的元素指定一个类。【参考方案3】:
你可以这样试试
//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方式一样样式?以上是关于MUI类中的样式元素[重复]的主要内容,如果未能解决你的问题,请参考以下文章