Menu
I am using a material-ui button and trying to override the border-radius (i.e, make it 0) through styled-components. However, it's not working.
Code:
import React from "react";
import styled from "styled-components";
import { Button } from "@material-ui/core";
const StyledButton = styled(Button)`
background-color: #d29d12;
border-radius: 0;
`;
export default function App() {
return <StyledButton>Hello</StyledButton>;
}
271
If you want to override a component's styles using custom classes, you can use the className prop, available on each component.
Just to give you an overview, Material UI doesn't limit you to only JSS based styling. If you love using Styled-Components or CSS modules, you have the freedom to use it with Material UI.
By default, MUI components come with Emotion as their style engine. If, however, you would like to use styled-components , you can configure your app by following the styled engine guide or starting with one of the example projects: Create React App with styled-components.
2 - Override the styles with the styled components: You can control the classenames that will be generated by MaterialUI. Maybe it will require a little more effort but it can also bring more flexibility. Please see these sections of the documentation:
If you wanted to override some styling of this button to have a variation of it, you would pass the Buttoncomponent as an argument to the styled()wrapper, for example, like so: const PrimaryButton = styled(Button)` color: white; background: blue; `;
First, use your browser's dev tools to identify the class for the component slot you want to override. The styles injected into the DOM by Material UI rely on class names that all follow a standard pattern : [hash]-Mui [Component name]- [name of the slot].
Learn how to customize Material UI components by taking advantage of different strategies for specific use cases. Material UI provides several different ways to customize a component's styles. Your specific context will determine which one is ideal. From narrowest to broadest use case, here are the options: 1. One-off customization
By default, Material-UI injects it styles at the end of the <head> element. This means that its styles will come after styles generated by styled-components and thus the Material-UI styles will win over the styled-components styles when CSS specificity is the same.
You can use the StylesProvider component with the injectFirst property to move the Material-UI styles to the beginning of the <head> and then the styled-components styles will come after it and win.
import React from "react";
import styled from "styled-components";
import Button from "@material-ui/core/Button";
import { StylesProvider } from "@material-ui/core/styles";
const StyledButton = styled(Button)`
background-color: red;
border-radius: 0;
`;
export default function App() {
return (
<StylesProvider injectFirst>
<div className="App">
<StyledButton>Hello</StyledButton>
</div>
</StylesProvider>
);
}
Related answers:
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
