React Material UI 随机化/删除 MUI class 名称

Question

Is it possible to randomize names or remove Mui-classNames?

Like in the image above? (All CSS class names would be jss XXX) Thank you

Answer 1

classNames like jssXXX are a result of uglification and will be auto generated by Material UI when the project is built for production mode. eg when you run npm run build in case of an app created using create-react-app .

className should be created in following way for Material UI to process it:

import React from 'react';
import { createStyles, Theme, makeStyles } from "@material-ui/core";

const CustomMuiTheme = makeStyles((theme: Theme) => createStyles({
  label: {
    color: red,
  }
});
const theme = CustomMuiTheme();

export const CssClassDemo = () => {
  return (
    <label className={theme.label}>label text</label>
  );
}

Classes created by user only will be uglified. Classes such as MuiGrid-container which are provided by Material UI won't be minified as it gives developers an opportunity to customise these styles.