Breaking News: Grepper is joining You.com. Read the official announcement!

override MuiOutlinedInput mui

Hajar Mekamy answered on August 18, 2022 Popularity 2/10 Helpfulness 1/10

answer override MuiOutlinedInput mui

related override MuiFiilledInput mui

override MuiOutlinedInput mui

Comment

   MuiOutlinedInput: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          height: 48,
          fontSize: 14,
          fontWeight: 400,
          color: theme.palette.common.black,
          "& :-webkit-autofill": {
            WebkitBoxShadow: "0 0 0 1000px white inset",
          },
          "& .MuiOutlinedInput-notchedOutline": {
            borderColor: theme.palette[ownerState?.color ? ownerState.color : "primary"][100],
          },

          "&:hover:not(.Mui-error):not(.Mui-focused):not(.Mui-disabled) .MuiOutlinedInput-notchedOutline": {
            borderColor: theme.palette[ownerState?.color ? ownerState.color : "primary"][200],
          },
          "&.Mui-focused:not(.Mui-error) .MuiOutlinedInput-notchedOutline": {
            borderColor: theme.palette[ownerState?.color ? ownerState.color : "primary"][500],
          },
        }),
      },
    },

Popularity 2/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: mui whatever

Link to this answer
Share Copy Link

Contributed on Aug 18 2022

Hajar Mekamy

0 Answers Avg Quality 2/10

Closely Related Answers

override MuiFiilledInput mui

Comment

 MuiFilledInput: {
      styleOverrides: {
        root: ({ ownerState }) => ({
          borderRadius: 10,
          backgroundColor: theme.palette[ownerState?.color ? ownerState.color : "primary"][50],
          color: theme.palette.common.black,
          height: 48,

          "& input": {
            fontSize: 14,
            fontWeight: 400,
            paddingTop: 14,
          },

          "& :-webkit-autofill": {
            borderRadius: 10,
            paddingBottom: 16,
            WebkitBoxShadow: `0 0 0 1000px ${
              theme.palette[ownerState?.color ? ownerState.color : "primary"][50]
            } inset`,

            "&:hover": {
              WebkitBoxShadow: `0 0 0 1000px ${
                theme.palette[ownerState?.color ? ownerState.color : "primary"]["light"]
              } inset`,
            },
          },

          "&:hover": {
            backgroundColor: theme.palette[ownerState?.color ? ownerState.color : "primary"]["light"],
          },

          "&.Mui-focused": {
            backgroundColor: theme.palette[ownerState?.color ? ownerState.color : "primary"][50],
          },
          "&.Mui-disabled": {
            backgroundColor: theme.palette.grey[50],
          },
          "&.Mui-error": {
            backgroundColor: "#FBF0E1",
            "& :-webkit-autofill": {
              WebkitBoxShadow: "0 0 0 1000px #FBF0E1 inset",
              borderRadius: 10,
            },
          },
        }),
        underline: {
          "&&&:before": {
            borderBottom: "none",
          },
          "&&:after": {
            borderBottom: "none",
          },
        },
      },
    },

Popularity 3/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: whatever mui

Link to this answer
Share Copy Link

Contributed on Aug 18 2022

Hajar Mekamy

0 Answers Avg Quality 2/10

override MuiOutlinedInput mui

Contents

More Related Answers

override MuiOutlinedInput mui

Closely Related Answers

override MuiFiilledInput mui

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.