如何在其中使用 MUI 组件的 React 自定义组件中覆盖 MUI CSS？

Question

下面是我在 Reactjs 中创建并用于不同组件的客户组件：

function SearchBox({ handle, placeholder, inputType, ...props}) {
  return (
        <Box
            sx={{
                display: 'flex',
                alignItems: 'flex-end',
                margin: 1,
                marginTop: 0,
                maxHeight: '30px'
            }}
        >
            <TextField
                sx={{
                    fontSize: '12px',
                    width: '100%'
                }}
                variant={inputType || 'standard'}
                InputProps={{
                    startAdornment: (
                    <InputAdornment position='start'>
                            <SearchIcon
                                sx={{
                                    color: 'action.active',
                                    mb: 0.2,
                                    display: 'flex',
                                    alignItems: 'flex-end'
                                }}
                            />
                        </InputAdornment>
                    ),
                    placeholder: placeholder || 'Search'
                }}
                onChange={handle}
            />
        </Box>
    );
}

我在其他一些组件中使用此组件<SearchBox handle={Keyword}/>那么如何为 SearchBox 组件的 TexField 和 Box 覆盖 css？ 我不想触摸 SearchBox 需要从我使用此组件的地方覆盖 css 属性。

当我在浏览器上检查时，我看到了类似这样的东西<div class="MuiBox-root css-1uqe0j">...</div>

什么是css-luqe0j ？

谁能帮我解决这个问题。

Answer 1

如果您根本不想修改SearchBox组件，您有几个选择，其中最合理的 (IMO) 是将SearchBox组件包装在一个styled化的组件中，然后以SearchBox中包含的元素为目标（它是子组件） ）， 例如：

const SearchBoxStyleOverrides = styled("div")({
  ".MuiBox-root": {
    padding: "2rem",
    backgroundColor: "green"
  },
  ".MuiSvgIcon-root": {
    color: "red"
  },
  ".MuiInput-input": {
    backgroundColor: "yellow"
  }
});

export default function YourApp() {
  return (
    <SearchBoxStyleOverrides>
      <SearchBox />
    </SearchBoxStyleOverrides>
  );
}

产生：（丑陋是为了效果）

工作代码沙盒：https://codesandbox.io/s/peaceful-dubinsky-wjthtt?file=/demo.js

并回答您的次要问题（“什么是css-luqe0j ？”），即生成的 css class 组件名称——您不想使用这些元素来定位元素，因为它们会经常更改。