如何在 React Js 中使用自定义 Css 设置 specific/single 项目或组件的样式？

Question

我一直在尝试设置搜索栏的样式，它是 React Material Ui 库中使用的 TextFiled 组件。但是，我尝试使用外部和内联 CSS 但没有结果。

我尝试使用 Withstyle，它确实有效，但它也会影响另一个组件上的其他 TextFiled。问题是如何只能针对一个特定项目？

真正的搜索 bar/TextFiled 图片默认为黑色边框，我想将其设为白色。

我试过的代码：

   const TextFiledStyle = withStyles({
    root: {
        '& .MuiOutlinedInput-root': {
            '& fieldset': {
              borderColor: 'white',
            },
            '&:hover fieldset': {
                borderColor: '#356E44',
              },
            '&.Mui-focused fieldset': {
                borderColor: 'gray',
              },
        },
    },
})(TextField);

非常感谢任何帮助或建议。

Answer 1

我认为您应该能够在使用时向组件添加 class 名称。

<TextField className="custom-class">some text</TextField>

然后根据需要调整 css。例如

.custom-class .MuiOutlinedInput-root fieldset {
  borderColor: white;
}

在文档中查看更多内容。 https://mui.com/customization/how-to-customize/#overriding-styles-with-class-names

Answer 2

感谢您的帮助，我不得不转了一点点，但找到了如下答案：

const useStyles = makeStyles (theme => ({
    textbox:{
        '& .MuiOutlinedInput-root': {
            color: 'white',
            border: '1px solid white'
        }
    },

}))

如何在 React Js 中使用自定义 Css 设置 specific/single 项目或组件的样式？

How to Style specific/single Item or a Component using Custom Css in React Js?

javascript

frontend

reactjs

mern

react-hooks