如何在Material UI TextField中用sx/Styled Component实现内联CSS伪选择器？

你可以通过以下两种方式将目标样式应用到Material UI的TextField组件：

方法一：使用sx属性 #

直接在TextField的sx属性中针对内部input元素设置伪类样式：

import TextField from '@mui/material/TextField';

function MyTextField() {
  return (
    <TextField
      label="示例输入框"
      sx={{
        '& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus, & input:-webkit-autofill:active': {
          WebkitBoxShadow: '0 0 0 30px white inset !important',
        },
      }}
    />
  );
}

说明：通过& input选择器定位到TextField内部的原生input元素，逐一匹配对应的Webkit伪类，将原CSS中的-webkit-box-shadow转换为React内联样式支持的驼峰式WebkitBoxShadow。

方法二：使用Styled Components #

创建自定义的StyledTextField组件封装样式：

import TextField from '@mui/material/TextField';
import styled from '@emotion/styled';

const StyledTextField = styled(TextField)`
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
  }
`;

function MyComponent() {
  return <StyledTextField label="示例输入框" />;
}

说明：这种写法和原生CSS规则几乎一致，直接在styled组件的样式块中写入原有伪类规则即可，无需转换驼峰式。

内容的提问来源于stack exchange，提问作者sujith kharvi