如何使用样式组件覆盖material-ui css？

Posted 2023-03-15

【中文标题】如何使用样式组件覆盖material-ui css？

【英文标题】：How to override material-ui css with styled component?

【发布时间】：2021-09-15 18:35:27

【问题描述】：

我还是 ui-material 的初学者。我想用styled-component 自定义我自己的按钮组件。

问题是根据按钮变化覆盖css，例如如果它是primary或secondary：

这是我在codesandbox.io中的代码

import React from "react";
import PropTypes from "prop-types";

import  CButton  from "./styles";

const CustomButton = ( children, color ) => 
  return (
    <div>
      <CButton variant="contained" color=color>
        children
      </CButton>
    </div>
  );
;

CustomButton.propTypes = 
  children: PropTypes.node,
  color: PropTypes.oneOf(["primary", "secondary"])
;

export default CustomButton;

import styled,  css  from "styled-components";
import Button from "@material-ui/core/Button";

export const CButton = styled(Button)`
  height: 80px;

  $( color ) =>
    color === "primary"
      ? css`
          background-color: green;
        `
      : color === "secondary" &&
        css`
          background-color: yellow;
        `
`;

import React from "react";

import CustomButton from "./CustomButton";

const App = () => 
  return (
    <div>
      <div
        style=
          marginBottom: "10px"
        
      >
        <CustomButton color="primary">Primary</CustomButton>
      </div>
      <div>
        <CustomButton color="secondary">Secondary</CustomButton>
      </div>
    </div>
  );
;

export default App;

你能告诉我如何让我的样式覆盖 ui 材质吗？

提前谢谢你。

【问题讨论】：

sn-ps 不运行是没有用的。你能创建一个运行的代码框吗？

嗨，克里斯，对不起，我用代码框更新了我的代码

@Tainara 这里是您尝试创建自定义组件的有效方式 [codesandbox.io/s/material-ui-with-styled-components-e9fr5?file=/…。您需要增加特异性以使样式与材质 ui 组件一起使用。正如 Chris 提到的，[material-ui.com/guides/interoperability/… UI 网站有一个很好的例子。

嗨 Junaid，这对我有用，谢谢

Material UI docs 有一些关于如何使用不同方法自定义组件的示例。

【参考方案1】：

在 material-ui 文档中似乎有一个很好的例子来说明如何做到这一点：https://material-ui.com/guides/interoperability/#styled-components

您似乎缺少的一件事是StylesProvider，它允许您的样式覆盖默认材质样式。这似乎可行...我不处理您示例中的条件，但我认为这不是您的问题的一部分。

const MyStyledButton = styled(Button)`
  background-color: red;
  color: white;
`;

export default function App() 
  return (
    <StylesProvider injectFirst>
      <div className="App">
        <MyStyledButton color="primary">Foo</MyStyledButton>
      </div>
    </StylesProvider>
  );

这是一个代码框：https://codesandbox.io/s/infallible-khorana-gnejy

【讨论】：

嗨，克里斯，谢谢，但我应该如何处理变化？主要和次要如何？

import StyledEngineProvider from '@mui/material' 获取最新版本的材质 ui