能否将makeStyles生成的样式作为组件props传递？

问题描述 #

我有一个带有styling属性的组件，原本在此传递内联样式。现在希望传递使用makeStyles编写的样式，具体代码如下：

const useStyles = makeStyles((theme) => ({
    fieldShape: {
        marginTop: "16px",
        [theme.breakpoints.up("md")]: {
            width: "625px",
        },
    },
}))

...
const classes = useStyles();

<MyComponent styling={classes.fieldShape}/>

...
// My Component
const { styling } = props
<TextField style={styling}/>

请问这样的实现方式是否可行？

回答 #

这种实现方式不可行，核心问题是类型不匹配以及语法不兼容：

• makeStyles生成的classes.fieldShape是一个CSS类名字符串，但TextField的style属性要求接收内联样式对象（例如{ marginTop: '16px' }），两者类型完全不匹配，样式不会生效。
• 代码中的响应式断点语法[theme.breakpoints.up("md")]是Material-UI专属的类样式语法，只有通过className属性应用时，Material-UI的样式引擎才会解析这个断点规则；直接传给style属性的话，浏览器无法识别该语法，断点样式完全不会起作用。

正确实现方式 #

推荐两种靠谱的写法：

方式一：传递类名（推荐）

充分利用Material-UI的样式引擎能力，传递类名给子组件，子组件通过className接收：

// 父组件
const classes = useStyles();
<MyComponent className={classes.fieldShape}/>

// 子组件
const { className } = props;
<TextField className={className}/>

方式二：传递内联样式对象（不推荐用于响应式场景）

如果一定要保留styling属性名，需要传递标准内联样式对象，但响应式断点需要手动写媒体查询（无法复用Material-UI主题断点）：

// 父组件
const styling = {
  marginTop: '16px',
  '@media (min-width: 960px)': { // 对应Material-UI md断点的默认宽度
    width: '625px'
  }
};
<MyComponent styling={styling}/>

// 子组件
const { styling } = props;
<TextField style={styling}/>

内容的提问来源于stack exchange，提问作者Ciaran Crowley