Material-ui: Overriding MuiInputLabel outlined shrink

Created on 6 Dec 2018  路  3Comments  路  Source: mui-org/material-ui

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.
      }
    }
  }
})
support

Most helpful comment

you can use

    MuiInputLabel: {
      outlined: {
        '&$shrink': {
           transform: 'translate(0px, 0px) scale(0.75)',
          },
      },
    },

to overriding the themes

All 3 comments

馃憢 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);

https://codesandbox.io/s/3vzr41zmjm

you can use

    MuiInputLabel: {
      outlined: {
        '&$shrink': {
           transform: 'translate(0px, 0px) scale(0.75)',
          },
      },
    },

to overriding the themes

Was this page helpful?
0 / 5 - 0 ratings

Related issues

newoga picture newoga  路  3Comments

ghost picture ghost  路  3Comments

ericraffin picture ericraffin  路  3Comments

FranBran picture FranBran  路  3Comments

revskill10 picture revskill10  路  3Comments