As a newcomer to UI material design, I am eager to create my own customized Button Component using styled-components.
I am facing a challenge in overriding the CSS based on different button variations such as "primary" or "secondary".
You can find my code on 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;https://i.stack.imgur.com/YUsQf.png
Can you guide me on how to ensure that my custom styling takes precedence over the ui-material?
Your assistance is greatly appreciated.