Overriding colors in React Material UI-CodePudding

Does anyone know how to override colors in Material UI without using JS? Is there a way to override colors using CSS only?

CodePudding user response：

Yes. You can absolutely do that and there are multiple ways to go about it. Everything is explained in the official documentation here

The simplest way is to use the sx prop in your component but you can use only css also if you prefer to.

CodePudding user response：

You can use styled to override styles. https://mui.com/system/styled/#main-content

import Box from '@mui/material/Box';
import { styled } from '@mui/system';

styled(Box)`
  height: 100px;
  width: 100px;
  background-color: red;
`

CodePudding user response：

import * as React from 'react';
import { styled } from '@mui/system';

const MyComponent = styled('div')({
  color: 'darkslategray',
  backgroundColor: 'aliceblue',
  padding: 8,
  borderRadius: 4,
});

export default function BasicUsage() {
  return <MyComponent>Styled div</MyComponent>;
}