CODEWITHSUNDEEP
reactjs
Simon1
Simon1

Reputation: 734

How to customize the border for MUI components

How can I change the border properties for an MUI Select component using ThemeProvider? I'm able to change the backgroundColor, but for some reason border properties like border and borderColor do not work.

App.js

import React from "react";
import {
  ThemeProvider,
  Box,
  FormControl,
  InputLabel,
  MenuItem,
  Select,
} from "@mui/material";
import theme from "./theme";

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box sx={{ minWidth: 200, margin: "5%" }}>
        <FormControl>
          <InputLabel id="demo-simple-select-label">Select Label</InputLabel>
          <Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            label="Select Label"
            variant="outlined"
            sx={{ minWidth: 200 }}
          >
            <MenuItem value={"1"}>Item 1</MenuItem>
            <MenuItem value={"2"}>Item 2</MenuItem>
            <MenuItem value={"3"}>Item 3</MenuItem>
          </Select>
        </FormControl>
      </Box>
    </ThemeProvider>
  );
}

export default App;

theme.js

import { createTheme } from "@mui/material";

const darkGrey = "#262626";
const mediumGrey = "#595959";
const lightGrey = "#adadad";
const white = "#ffffff";
const limeGreen = "3df730";

const theme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        root: {
          backgroundColor: mediumGrey,
          border: "4px",
          borderColor: "red",
        },
      },
    },
    // This doesn't work either
    // MuiOutlinedInput: {
    //   styleOverrides: {
    //     root: {
    //       border: "4px",
    //       borderColor: limeGreen,
    //     },
    //   },
    // },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: white,
        },
      },
    },
  },
});

export default theme;

Upvotes: 0

Views: 819

Answers (1)

Mentlegen
Mentlegen

Reputation: 1278

There are three main issues here:

First, the styleOverrides of the Select component do not have any root property (see https://mui.com/material-ui/api/select/#css). You can use select instead.

Second, your border doesn't have any specified thickness so it won't be visible.

Third, your limeGreen color doesn't start with a # so it won't be recognized as a hex color.

Here is a fixed version of the styling file:

import { createTheme } from '@mui/material';

const darkGrey = '#262626';
const mediumGrey = '#595959';
const lightGrey = '#adadad';
const white = '#ffffff';
const limeGreen = '#3df730';

const theme = createTheme({
  components: {
    MuiSelect: {
      styleOverrides: {
        select: {
          backgroundColor: mediumGrey,
          border: 'solid 3px',
          borderColor: limeGreen,
        },
      },
    },
    // This doesn't work either
    // MuiOutlinedInput: {
    //   styleOverrides: {
    //     root: {
    //       border: "4px",
    //       borderColor: limeGreen,
    //     },
    //   },
    // },
    MuiInputLabel: {
      styleOverrides: {
        root: {
          color: white,
        },
      },
    },
  },
});

export default theme;

Upvotes: 1

Related Questions