Material UI TextField组件标签样式不生效，如何排查解决？

嘿，我懂你的困扰——想给TextField的label加上大写转换效果，但直接在withStyles里写label样式键完全没反应对吧？这是因为Material UI的TextField组件内部，label是由独立的InputLabel子组件渲染的，你直接用label作为样式键，根本命中不到目标元素。

下面给你两种靠谱的解决办法：

方法一：用嵌套CSS选择器定位内部InputLabel #

你可以在root样式里，通过嵌套选择器找到Material UI给InputLabel自动添加的类名MuiInputLabel-root，然后给它设置样式：

import React, { PureComponent } from 'react'
import { withStyles } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'

const StyledTextField = withStyles({
  root: {
    // 嵌套选择器精准定位内部的InputLabel元素
    '& .MuiInputLabel-root': {
      textTransform: 'uppercase'
    }
  }
})(TextField)

class App extends PureComponent {
  render() {
    return (
      <StyledTextField id='city-of-residence' label='Город проживания' fullWidth={true} margin='normal' helperText='helperText'/>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

方法二：通过InputLabelProps单独定制label #

这种方法逻辑更清晰，直接通过TextField的InputLabelProps属性，把定制好的样式传给内部的InputLabel组件：

import React, { PureComponent } from 'react'
import { withStyles } from '@material-ui/core/styles'
import TextField from '@material-ui/core/TextField'
import InputLabel from '@material-ui/core/InputLabel'

// 先单独定制InputLabel组件的样式
const StyledInputLabel = withStyles({
  root: {
    textTransform: 'uppercase'
  }
})(InputLabel)

class App extends PureComponent {
  render() {
    return (
      <TextField 
        id='city-of-residence' 
        label='Город проживания' 
        fullWidth={true} 
        margin='normal' 
        helperText='helperText'
        // 把定制好的InputLabel传给TextField
        InputLabelProps={{
          component: StyledInputLabel
        }}
      />
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

或者更简洁的写法，不用单独定义组件，直接在InputLabelProps里传入样式类：

const StyledTextField = withStyles({
  customLabel: {
    textTransform: 'uppercase'
  }
})(TextField)

// 使用时
<StyledTextField 
  // ...其他属性
  InputLabelProps={{
    className: props.classes.customLabel
  }}
/>

这两种方法都能让你的label样式正常生效，选哪种就看你个人的代码习惯啦～

内容的提问来源于stack exchange，提问作者north.inhale