javascript - TextField Style using styed-components and Material-UI withStyles - Stack Overflow

admin管理员组

文章数量:1356364

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

Share Improve this question Follow edited Jul 27, 2020 at 17:40 Ryan Cogswell 81.3k99 gold badges241241 silver badges212212 bronze badges asked Jul 27, 2020 at 14:58 YukichkaYukichka 15222 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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

本文标签： javascriptTextField Style using styedcomponents and MaterialUI withStylesStack Overflow