如何修改 mui 组件中的 css - 手风琴？答案

【问题标题】：how do I modify css in mui components - accordian?如何修改 mui 组件中的 css - 手风琴？
【发布时间】：2021-10-26 17:45:34
【问题描述】：

在这里反应新手。我正在使用 Material-ui 中的 Accordian 组件并希望设置背景颜色和其他样式选项，但我很困惑，因为他们的文档中的 Material-ui 示例遵循export defaulf func... 样式而我的代码库遵循export const 样式，如下所示。两者有什么区别？如何克服我的样式问题并在下面的代码中为手风琴设置背景颜色？

我尝试了以下方法；

import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';


export interface CProps {
  data: any;
}

export const Cbutes: React.FC<CProps> = ({ data }) => {
  
    return <div>
      <Accordion>
        <AccordionSummary
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
            malesuada lacus ex, sit amet blandit leo lobortis eget.
          </Typography>
        </AccordionDetails>
      </Accordion>
     
      
    </div>
};

className="bg-color-blue-500..." 是我通常在整个应用程序中使用顺风设计元素的方式。但在这种情况下似乎不起作用。我相信我需要使用 materialUI 样式。有人可以提供一些启示或指导我正确的方向吗？

【问题讨论】：

github.com/damien-monni/material-ui-tailwind 有帮助吗？
感谢@Armihe 的评论，但我想坚持现有的库而不必复杂化。您知道甚至可以使用 materialUI 样式来更改这些手风琴的背景颜色和文本颜色吗？
我猜最便宜的做法是使用每个组件长期以来提供的类道具

标签： css reactjs

【解决方案1】：

如果您不想更改项目中的任何基础设施，您可以使用旧的 classes 道具。 classes 属性是一个用于覆盖或扩展应用于组件的样式的对象。有关详细信息，请参阅下面的CSS API。

它适用于简单的 CSS 组合，因此它一定不会有顺风的问题，但如果您在特异性和覆盖方面遇到问题，您可能需要稍微更改一下配置

这是基本手风琴组件的示例。

可以在here找到CSS可能的键。

<Accordion
  classes={{
    root: 'lowercase text-gray-500 bg-red-100'
  }}
/>

【讨论】：