如何在Material UI中通过JSS为Grid内的所有Field设置样式？

嘿，我来帮你搞定这个JSS样式不生效的问题！

首先得说清楚：你原来的JSS写法之所以没效果，是因为JSS的嵌套语法和普通CSS不一样——直接写Field: { ... }并不是在选择shopForm下的Field子组件，而是在给shopForm类内部定义一个名为Field的新类，这显然不是你想要的。

正确的修改方案 #

根据你的场景，我给你几个可行的选项：

选项1：针对TextField的内置类名设置（推荐）

因为你的Field组件用了component={TextField}，最终渲染的是Material UI的TextField组件，它的根元素自带MuiTextField-root类名。你可以用这个类名来设置样式：

const styles = {
  shopForm: {
    textAlign: 'center',
    // 用&引用父类，选择所有子元素中的TextField根类
    '& .MuiTextField-root': {
      width: '60%'
    }
  }
}

选项2：给Field组件单独加类名

如果不想依赖MUI的内置类名，你可以给每个Field组件手动添加自定义类：

const styles = {
  shopForm: {
    textAlign: 'center'
  },
  // 定义自定义字段样式类
  formField: {
    width: '60%'
  }
}

然后在组件里引用这个类：

<Grid item lg={4} className={classes.shopForm}>
 <Field name="name" type="text" label="name" component={TextField} className={classes.formField} />
 <Field name="plaque" type="text" label="plaque" component={TextField} className={classes.formField} />
 {/* 其他Field组件同理 */}
</Grid>

选项3：模拟CSS中的标签/类选择器（如果你的Field有对应标签/类）

如果你的CSS写法.shopForm Field确实生效了，说明你的Field组件渲染后是一个名为Field的HTML标签（或者带有Field类名）。那JSS里需要用&来关联父选择器：

// 如果是标签选择器（比如<Field>标签）
const styles = {
  shopForm: {
    textAlign: 'center',
    '& Field': {
      width: '60%'
    }
  }
}

// 如果是类选择器（比如Field组件有className="Field"）
const styles = {
  shopForm: {
    textAlign: 'center',
    '& .Field': {
      width: '60%'
    }
  }
}

关于JSS嵌套样式的可行性 #

完全可行！JSS支持嵌套选择器，核心是用&符号来代表当前的父选择器，通过它你可以实现和CSS一样的嵌套层级选择，只要语法正确就没问题~

内容的提问来源于stack exchange，提问作者Reza Sam