我仍然是 ui-material 的初学者。我想自定义我自己的按钮组件styled-component
。
问题是根据按钮的变化覆盖 css,例如,如果它是primary
或secondary
:
这是我在codeandbox.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-material 吗?
先感谢您。
看起来在 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
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句