Note that when you use &::before with content, you need to add quotes to the value of content, otherwise the text does not get applied correctly.
&:hover{ background-color: ${props => lighten(0.7,themesMap.get(props.theme)!.secondaryColor)}; } &:before{ content: 'before'; }
Customization of the TextField can be cumbersome with the classes API, where you have to define the the classes prop. It's easier to use the default values, as described above. For example:
It's surprising that they show an example using styled-components, which is a competing style library to their own @material-ui/styles, and even admit that this might be preferred over using the classes API, which they admit may be cumbersome.
I like that they are open-minded enough to acknowledge that there are cases where built-in API may be too cumbersome, and even show examples of using styled-components.
@emotion/core