Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change material UI select border and label

I am trying to change the border of a select component from Material-UI. So far I've tried:

const styles = theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    backgroundColor: "lightgrey"
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing.unit * 2
  },
  cssLabel: {
    color: "pink",
    "&$cssFocused": {
      color: "pink"
    }
  },
  cssFocused: {
    color: "pink"
  },
  underline: {
    "&:after": {
      borderBottom: "1px solid pink",
      borderTop: "1px solid pink"
    }
  }
});

I can customise TextField etc., but after many many hours, I still can not customise the Select. I tried to pass also an Input, but then you have to customise the Input, which is even worse.

Could someone help me with this sandbox?

https://codesandbox.io/s/material-demo-ecj1k

I would really appreciate it.

like image 822
AlbertMunichMar Avatar asked Feb 28 '20 22:02

AlbertMunichMar


People also ask

How do I change the select border color in material UI?

To change the color of Select component's border and arrow icon with React Material UI, we can use the '&:before' and '&:after' selectors and apply the styles for them. We call makeStyles with a function that returns an object with the select property set to an object with the drop down styles.

How do I change the Select icon in material UI?

To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render. We set the Select 's IconComponent prop to a function that returns the Person icon component. And we add some MenuItem components to add some choices.


2 Answers

Below is an example of overriding the colors of the border (MuiOutlinedInput-notchedOutline), label (MuiInputLabel-root), and selected item text (MuiOutlinedInput-input) for default, hover, and focused states.

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    width: 200,
    "& .MuiOutlinedInput-input": {
      color: "green"
    },
    "& .MuiInputLabel-root": {
      color: "green"
    },
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-input": {
      color: "red"
    },
    "&:hover .MuiInputLabel-root": {
      color: "red"
    },
    "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
      color: "purple"
    },
    "& .MuiInputLabel-root.Mui-focused": {
      color: "purple"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    }
  }
});

function App() {
  const [age, setAge] = React.useState("");
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        className={classes.root}
        value={age}
        onChange={e => setAge(e.target.value)}
        variant="outlined"
        label="My Label"
        select
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </TextField>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit TextField outlined

Related answers:

  • Change border color on Material-UI TextField
  • Is there a way to style the border color and text color of <TextField/> in Material-UI without using makeStyles
like image 109
Ryan Cogswell Avatar answered Oct 19 '22 15:10

Ryan Cogswell


You can override styling of child element classes e.g.

selectBorder: {
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: 'red'
  }
}

If you apply className={classes.selectBorder} to your Select component, it will change the border color to red.

like image 21
curiousdev Avatar answered Oct 19 '22 15:10

curiousdev