I'm trying to modify Material UI from SASS, for a mini project I'm doing with React and JavaScript. However, I am getting errors. I show you my Button component and its SCSS:
// import Button from "@material-ui/core/Button";
import "./CustomButton.scss";
function CustomButton() {
return (
<Button
variant="contained"
color="primary"
className="buttom primary-buttom"
>
Save
</Button>
);
}
export default CustomButton;
And the SCSS code:
@import "@material-ui/core/Button";
Basically, I have this like this because it should render. However, it does not render and gives an error because it says that in the SCSS import it does not know where to import from. I have seen in a tutorial that two years ago this way worked, however it seems that today this way doesn't work and I don't even know if it is possible. The basic idea is by linking the Material UI component to my SCSS file to be able to customize the button cleanly. Any ideas? Thanks.
First of all Material UI is a component framework not styles, it works with its own Styles renderer MakeStyles Documentation
If you need to use SCSS it would be best to make a file and call the class in your component for example plain CSS in Material UI
BTW in this block
@import "@material-ui/core/Button"
you can't import the "CSS" of that component like this, since it's JSX not CSS.In the next block you must import the Button component.
For your SCSS in CustomButton.scss file this could be an example
It is totally valid to call the classes from the component and add them to the className