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-ponents?

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!

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-ponents?

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!

• javascript
• reactjs
• material-ui
• styled-ponents

2 Answers 2

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

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-ponents 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-ponents. 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-ponents";

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-p" />
      <StyledTextField variant="outlined" label="outlined styled-p" />
    </div>
  );
}

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};
          }
        }
      `)