如何为React TextField组件中的label标签设置单独外边距？

以下方案均可实现仅修改当前TextField的label边距，不会全局污染其他组件样式：

• 方案1：使用内置InputLabelProps属性（推荐）
  直接通过TextField自带的InputLabelProps参数将样式透传给内部label标签，修改后的代码如下：

  <TextField
    className="w-full"
    id="name"
    type="text"
    disabled
    name="name"
    label="Company name"
    value={name || ''}
    onChange={(event) => setName(event.target.value)}
    validations={{ minLength: 2, maxLength: 100 }}
    validationErrors={{
      isDefaultRequiredValue: 'Company name is required',
      minLength: 'Company name must contain at least 2 characters',
      maxLength: 'Company name must contain at most 100 characters',
    }}
    variant="filled"
    required
    // 新增以下配置，可按需调整边距数值和方向
    InputLabelProps={{
      sx: {
        marginBottom: '8px'
      }
    }}
  />
  

  如果你偏好使用自定义类名控制样式，可替换为：

  InputLabelProps={{
    className: 'custom-field-label'
  }}
  

  再在CSS文件中添加对应规则：

  .custom-field-label {
    margin-bottom: 8px;
  }
  

• 方案2：通过嵌套CSS选择器定位
  借助你已经给TextField设置的w-full类名，嵌套匹配组件内置的label类名：

  .w-full .MuiInputLabel-root {
    margin-bottom: 8px;
  }
  

• 方案3：通过sx属性直接嵌套定义样式
  直接在TextField的sx属性中嵌套指定label的样式：

  <TextField
    // 其余原有属性保持不变
    sx={{
      '& .MuiInputLabel-root': {
        marginBottom: '8px'
      }
    }}
  />
  

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