It would be useful to be able to edit _outlined/filled input label on shrink_ in the global theme overrides!
ie.
export default createMuiTheme({
overrides: {
MuiInputLabel: {
shrink: {
outlined: {
transform: .... etc.
}
}
}
}
})
or like
export default createMuiTheme({
overrides: {
MuiOutlinedInputLabel: {
shrink: {
transform: .... etc.
}
}
}
})
馃憢 Thanks for using Material-UI!
We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.
If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.
@GavMan1995 If that can help:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";
import { purple } from "@material-ui/core/colors";
const styles = theme => ({
inputLabel: {
"&.focused": {
color: purple[500]
},
"&.shrink": {
backgroundColor: "grey"
}
}
});
function CustomizedInputs(props) {
const { classes } = props;
return (
<TextField
InputLabelProps={{
classes: {
root: classes.inputLabel,
focused: "focused",
shrink: "shrink"
}
}}
label="Custom CSS"
variant="outlined"
id="custom-css-outlined-input"
/>
);
}
CustomizedInputs.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(CustomizedInputs);
you can use
MuiInputLabel: {
outlined: {
'&$shrink': {
transform: 'translate(0px, 0px) scale(0.75)',
},
},
},
to overriding the themes
Most helpful comment
you can use
to overriding the themes