Material-UI Capitalize words in React

Question

I'd like to capitalize the text within a <TextField> component.

Current text: LeaGUE oF lEGENdS
Desired format: League Of Legends

I've tried to use text-transform: 'capitalize' but it's not working how I expect it to.

I also have a function that will capitalize my text using plain JS:

string.toLowerCase()
            .split(' ')
            .map((s) => s.charAt(0).toUpperCase() + s.substring(1))
            .join(' ');

The problem is that I don't know how I should use the JS function because I want to capitalize text in multiple <TextField> components, but I don't want to override material-ui components. Is there a way to use the props?

Answer 1

An easy way to transform "LeaGUE oF lEGENdS" into "League Of Legends" is to make use of the inputProps prop:

<TextField inputProps={{style: {textTransform: 'capitalize'}}} />