material-ui中的useTheme和createMiuiTheme有什么区别?

Question

我在useTheme和createMiuiTheme之间感到困惑。

Answer 1

useTheme是一个钩子，用于访问React组件中的Material UI主题。

import React from 'react';
import { useTheme } from '@material-ui/core/styles';
export default function MyComponent() {
const theme = useTheme();
return <div>{`spacing ${theme.spacing}`}</div>;
}

作为,

createMuiTheme用于创建，主要覆盖材质UI主题到一个特定的组件或整个React应用主题。

import React from 'react';
import Checkbox from '@material-ui/core/Checkbox';
import {
createMuiTheme,
makeStyles,
createStyles,
Theme as AugmentedTheme,
ThemeProvider,
} from '@material-ui/core/styles';
import { orange } from '@material-ui/core/colors';
declare module '@material-ui/core/styles/createMuiTheme' {
interface Theme {
status: {
danger: string;
};
}
// allow configuration using `createMuiTheme`
interface ThemeOptions {
status?: {
danger?: string;
};
}
}
const useStyles = makeStyles((theme: AugmentedTheme) =>
createStyles({
root: {
color: theme.status.danger,
'&$checked': {
color: theme.status.danger,
},
},
checked: {},
}),
);
function CustomCheckbox() {
const classes = useStyles();
return (
<Checkbox
defaultChecked
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
);
}