在 React 中,我有一个功能组件可以验证 props 并为任何不需要的 props 实现默认 props。我还使用 mui 的 makeStyles
获取 theme
对象以将样式应用到我的组件。
我的问题是如何将makeStyles
主题对象传递给defaultProps
以避免硬键控值?
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
componentStyle: {
color: `${theme.palette.light.main}`, // just like how I'm accessing `theme` here, I'd like to access in `defaultProps`
},
componentContainer: ({ backgroundColor }) => {
return { backgroundColor };
},
}));
const Example = ({ backgroundColor }) => {
const classes = useStyles({ backgroundColor });
return (
<div className={classes.componentStyle} >
<div className={classes.componentContainer} /> // use default styling using `theme` if none is provided
</div>
)
}
Example.propTypes = {
backgroundColor: PropTypes.string,
};
Example.defaultProps = {
backgroundColor: `${theme.palette.light.main}`, // I want to access `theme` here and do the following. While `backgroundColor: 'white'` will work I want to avoid hard keying values.
};
export default Example;
编辑:基于下面@Fraction 提供的解决方案,我将继续推进。
import React from 'react';
import PropTypes from 'prop-types';
import { makeStyles } from '@material-ui/core/styles';
const useStyles = makeStyles(theme => ({
componentStyle: {
color: `${theme.palette.light.main}`,
},
componentContainer: ({ backgroundColor }) => {
return {
backgroundColor: backgroundColor || `${theme.palette.light.main}`
};
},
}));
const Example = ({ backgroundColor }) => {
const classes = useStyles({ backgroundColor });
return (
<div className={classes.componentStyle} >
<div className={classes.componentContainer} />
</div>
)
}
Example.propTypes = {
backgroundColor: PropTypes.string,
};
Example.defaultProps = {
backgroundColor: null,
};
export default Example;
最佳答案
我建议不要将主题作为 Prop 传递,而是使用主题上下文。
我在我正在开发的所有应用程序中都这样做,它很灵活,也可以防止 Prop 钻孔。
在您的顶级组件中,例如App.tsx
放置 Material UI 主题提供者:
import { ThemeProvider } from '@material-ui/core/styles';
import DeepChild from './my_components/DeepChild';
const theme = {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
};
function Theming() {
return (
<ThemeProvider theme={theme}>
<DeepChild />
</ThemeProvider>
);
}
然后,在您需要主题的组件中: (根据 https://material-ui.com/styles/advanced/#accessing-the-theme-in-a-component ):
import { useTheme } from '@material-ui/core/styles';
function DeepChild() {
const theme = useTheme();
return <span>{`spacing ${theme.spacing}`}</span>;
}
关于reactjs - 如何将 material-ui 主题对象传递给 defaultProps?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61213722/