在 React Material UI 中覆盖颜色

【问题标题】：Overriding colors in React Material UI在 React Material UI 中覆盖颜色
【发布时间】：2022-01-20 20:38:36
【问题描述】：

有谁知道如何在不使用 JS 的情况下覆盖 Material UI 中的颜色？有没有办法只使用 CSS 覆盖颜色？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

是的。你绝对可以做到这一点，并且有多种方法可以做到这一点。一切都在官方文档here中解释了

最简单的方法是在组件中使用 sx 属性，但如果您愿意，也可以只使用 css。

【讨论】：

【解决方案2】：

您可以使用 styled 来覆盖样式。 https://mui.com/system/styled/#main-content

import Box from '@mui/material/Box';
import { styled } from '@mui/system';

styled(Box)`
  height: 100px;
  width: 100px;
  background-color: red;
`

【讨论】：

【解决方案3】：

import * as React from 'react';
import { styled } from '@mui/system';

const MyComponent = styled('div')({
  color: 'darkslategray',
  backgroundColor: 'aliceblue',
  padding: 8,
  borderRadius: 4,
});

export default function BasicUsage() {
  return <MyComponent>Styled div</MyComponent>;
}

【讨论】：