材质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

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

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

Answer 2

您可以在CSS中使用 text-transform：大写；