Here is the code I am currently working with:
class StyledInput extends React.Component{
styles = (color, theme) => ({
underline: {
borderBottom: `2px solid ${color}`,
'&:after': {
borderBottom: `2px solid ${color}`,
}
}
})
div = props => (
<TextField
placeholder="temp input"
InputProps={{
classes:{
root: props.classes.underline
},
style:{
height: '1.5rem',
fontSize:'1rem',
marginTop: '-1rem',
}
}}
>
<div>
{props.children}
</div>
</TextField>
)
Styled = withStyles(this.styles('white'))(this.div)
render(){
return(
<div>
<this.Styled>{this.props.children}</this.Styled>
</div>
);
}
}
export default StyledInput;
The current functionality successfully changes the color of the bottom bar in a material UI text field to white when clicked by the user.
However, my goal is to make it more dynamic, like this:
<this.Styled color={someDefinedColor}>{this.props.children}</this.Styled>
where Styled would be changed to:
Styled = (color) => withStyles(this.styles(color))(this.div)
I have attempted to implement this, but haven't been successful so far. Material-ui can be challenging when it comes to dynamically changing colors. Does anyone have any insight or suggestions on how to achieve this?
Thank you!