TextField Style using styed-components and Material-UI withStyles

user_11849442 0
Viewed 2731

Here is Material-UI TextField style using withStyles from Material-UI itself:

export const STextField = withStyles({
  root: {
    background: 'white',
    '& label.Mui-focused': {
      color: 'white'
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: 'white'
    },
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: 'white'
      },
      '&:hover fieldset': {
        borderColor: 'white'
      },
      '&.Mui-focused fieldset': {
        borderColor: 'white'
      }
    }
  }
})(TextField);

and it works perfectly.

Is there any way to make the same style using styled-components?

I tried this:

export const STextField = styled(TextField)`
.MuiTextField-root {
  background: 'white'
    & label.Mui-focused: {
      color: 'white'
    },
    & .MuiInput-underline:after: {
      borderBottomColor: 'white'
    },
    & .MuiOutlinedInput-root: {
      & fieldset: {
        borderColor: 'white'
      },
      &:hover fieldset: {
        borderColor: 'white'
      },
      &.Mui-focused fieldset: {
        borderColor: 'white'
      }
}
`;

but it is not making the same style.

I might be missing some extra syntax, any help appreciated!

material-ui styled-components reactjs javascript
2 Answers

Below is an example showing the correct syntax for the equivalent using styled-components.

It fixes the following syntax issues:

  1. You don't need to surround the styles with .MuiTextField-root {...}. The root level is the level at which the class name from styled-components will be applied. Surrounding the styles with .MuiTextField-root {...} will cause it to not work since it will look for a descendant of the TextField root element with that class (but the class is on the TextField root element itself).

  2. You need to use CSS syntax instead of the JS object syntax when providing a template literal to styled-components. This means:

    • no : prior to the brackets for a style rule
    • no quotes around the color string white
    • use the CSS property names with dashes rather than the camelCase versions for JS objects (e.g. border-color instead of borderColor)
import React from "react";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";
import styled from "styled-components";

const WithStylesTextField = withStyles({
  root: {
    background: "white",
    "& label.Mui-focused": {
      color: "white"
    },
    "& .MuiInput-underline:after": {
      borderBottomColor: "white"
    },
    "& .MuiOutlinedInput-root": {
      "& fieldset": {
        borderColor: "white"
      },
      "&:hover fieldset": {
        borderColor: "white"
      },
      "&.Mui-focused fieldset": {
        borderColor: "white"
      }
    }
  }
})(TextField);

const StyledTextField = styled(TextField)`
  background: white;
  & label.Mui-focused {
    color: white;
  }
  & .MuiInput-underline:after {
    border-bottom-color: white;
  }
  & .MuiOutlinedInput-root {
    & fieldset {
      border-color: white;
    }
    &:hover fieldset {
      border-color: white;
    }
    &.Mui-focused fieldset {
      border-color: white;
    }
  }
`;
export default function App() {
  return (
    <div>
      <WithStylesTextField variant="standard" label="standard withStyles" />
      <WithStylesTextField variant="outlined" label="outlined withStyles" />
      <br />
      <StyledTextField variant="standard" label="standard styled-comp" />
      <StyledTextField variant="outlined" label="outlined styled-comp" />
    </div>
  );
}

Edit styled-components TextField

user_74959300

To extend off of Ryan's answer, here are the targets for the other TextField variants.

filled & standard Inputs

same styles apply to the "standard" variant. Simply update each classname to .MuiInput-

(variant === 'filled' &&
      css`
        & .MuiFilledInput-root {
          &.MuiFilledInput-underline:before {
            border-bottom: 1px solid ${({ theme }) => theme.palette.colors.main};
          }
          &.MuiFilledInput-underline:after {
            border-bottom: 2px solid ${({ theme }) => theme.palette.colors.main};
          }
        }
      `)
user_103491520
Related