'Material UI TextField customization

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 =(

Solution 1:^[1]

Just add property InputLabelProps={{ style: { textTransform: "uppercase" } }} to the TextField or add this CSS class:

"& .MuiInputLabel-root":{
    textTransform: "uppercase"
 }

Solution 2:^[2]

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

Solution 3:^[3]

You can use in css text-transform: uppercase;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Henry Ecker
Solution 2	sathish kumar
Solution 3	Ankit Kumar Rajpoot

'Material UI TextField customization

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]