Material UI TextField 自定义

Question

我不能在 TextField 组件中自定义标签。样式不适用于TextField 组件中的标签。我做错了什么？

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

    const StyledTextField = withStyles({
        root: {},
        label: {
            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'))

预期结果 =)

当前结果 =(

Answer 1

您好，您可以在标签内使用您的自定义反应元素，如下所示

 <StyledTextField
                    id='city-of-residence'
                    label={<p style={{textTransform: 'uppercase'}}>Город проживания</p>}
                    fullWidth={true}
                    margin='normal'
                    helperText='helperText'/>
            )

Answer 2

可以在css中使用text-transform: uppercase;