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

Posted 2023-02-22

【中文标题】使用 styled-components 和 Material-UI withStyles 的 TextField 样式

【英文标题】：TextField Style using styed-components and Material-UI withStyles

【发布时间】：2020-11-16 22:37:54

【问题描述】：

这是 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'
      

`;

但它制作的风格不一样。

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

【参考方案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;
          
        
      `)

【参考方案2】：

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

它修复了以下语法问题：

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

在向样式化组件提供模板文字时，您需要使用 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>
  );

【讨论】：

非常好的和全面的答案，欣赏！