Material UI TextField customization

Question

I сannot customize label in TextField component. Styles do not apply to label in TextField component. What am I doing wrong?

    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'))

Expected result =)

Current result =(

Answer 1

hi you can use your custom react element inside label like below

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

Answer 2

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