MUI类中的样式元素[重复]

Posted

技术标签:

【中文标题】MUI类中的样式元素[重复]【英文标题】:Styling element inside class MUI [duplicate] 【发布时间】:2018-10-26 08:42:15 【问题描述】:

是否可以在 MUI 中为 Grid 内的所有 Fields 设置样式? 我已经知道如何在 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 &gt; div &gt; 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类中的样式元素[重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何在 MUI 中设置抽屉的纸张样式?

div元素的CSS样式规则,该元素属于嵌套在另一个元素类中的多个类

MUI - 概述的选择标签未正确呈现

Css为一个类分配多个样式块[重复]

MUI智慧树

MUI智慧树