时间戳

首页 > 解决方案 > 如何使用样式组件覆盖material-ui css？

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

问题描述

我仍然是 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 材质吗？

先感谢您。

标签： javascriptcssreactjsmaterial-uistyled-components

解决方案

看起来在 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

推荐阅读