使用 styled-components 和 Material-UI withStyles 的 TextField 样式

Question

这是 Material-UI TextField 样式，使用来自 Material-UI 本身的 withStyles：

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

而且效果很好。

有没有什么方法可以使用styled-components制作相同的样式？

我试过了：

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

但它制作的风格不一样。

我可能遗漏了一些额外的语法，感谢任何帮助！

Answer 1

为了扩展 Ryan 的回答，这里是其他 TextField 变体的目标。

填充和标准输入

相同的样式适用于“标准”变体。只需将每个类名更新为.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};
          }
        }
      `)

Answer 2

下面的示例显示了使用 styled-components 的等效项的正确语法。

它修复了以下语法问题：

1. 您不需要用.MuiTextField-root {...} 包围样式。根级别是应用样式组件中的类名的级别。用.MuiTextField-root {...} 包围样式将导致它无法工作，因为它将查找具有该类的 TextField 根元素的后代（但该类位于 TextField 根元素本身上）。

2. 在向样式化组件提供模板文字时，您需要使用 CSS 语法而不是 JS 对象语法。这意味着：

   • 在样式规则的括号前没有:
   • 颜色字符串white 周围没有引号
   • 使用带有破折号的 CSS 属性名称，而不是 JS 对象的驼峰式版本（例如，border-color 而不是 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>
  );
}