How to override the CSS default properties of Material UI on React?

I have some React project and I'm using the 'Table' component from Maerial UI. That table with her components (TableHead, TableCell, TableRow etc.) have thier default CSS properties. But when I'm trying to override that in a suitable and right way for developing I cannot change those properties somehow

I'm looking for a way to do that without TypeScript code, but only in the seperate CSS file Someone have an advice?

If you want to override the default CSS properties of the Material UI Table component in a separate CSS file without using TypeScript, you can use the global CSS overrides and default props in the Material UI theme. Here are the steps: Create a new CSS file and import it into your React application using the "import" statement. Define the global CSS overrides for the Table component in the CSS file. For example, you can use the following CSS code to change the background color of the TableHead component: CSS

.MuiTableHead-root {
  background-color: #f5f5f5;
}

Create a new Material UI theme in your React application and set the global CSS overrides and default props for the Table component. For example, you can use the following code to create a new theme and set the global CSS overrides and default props: JavaScript

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  overrides: {
    MuiTableHead: {
      root: {
        backgroundColor: '#f5f5f5',
      },
    },
  },
  props: {
    MuiTable: {
      size: 'small',
    },
    MuiTableCell: {
      size: 'small',
    },
  },
});

export default theme;

Apply the new theme to your React application using the "ThemeProvider" component. For example, you can use the following code to apply the new theme to your application: JavaScript

import { ThemeProvider } from '@material-ui/core/styles';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* Your application code */}
    </ThemeProvider>
  );
}

export default App;

Remember to use reputable sources and follow best practices when creating and applying global CSS overrides and default props in Material UI. Additionally, you can refer to the official documentation and online resources for more information on using global CSS overrides and default props in Material UI.