梅V5样式(排版)变体不起作用
现在，排版变体是内联的，如下所示：
<Typography variant="h6">
Any text
</Typography>如果样式排版如下所示，则变体实际上不会生效。我可以问一下，为什么不起作用？代码应该是什么样子的？谢谢。
const StyledTypography = styled(Typography)(({ theme }) => ({
variant: theme.typography.h6,
}));
<StyledTypography>
Any text
</StyledTypography>回答 3
Stack Overflow用户
发布于 2022-06-17 05:29:42
如果您的目标仅仅是使用h6变体，那么将其作为一个支柱传递给您。variant不是有效的参数。
<Typography variant="h6">
</Typography>您还可以将道具传递到样式组件中。
<StyledTypography variant="h6">
</StyledTypography>theme.typography.h6是一个包含各种事物的对象，例如，lineHeight、fontWeight之类的东西。这不是什么东西，你可以这样传递，作为一个造型的属性。
您可以将这个对象扩展到一个样式化的组件中，以实现您想要的结果，但是，同样，不值得使用变体作为支撑。
const StyledTypography = styled(Typography)(({ theme }) => ({
...theme.typography.h6 // Don't do this.
}));
export default function Example() {
return (
<StyledTypography>
Just use normal Typography
</StyledTypography>
);
}下面是我所描述的一个简单的工作示例：https://codesandbox.io/s/variant-as-styled-parameter-zd975r?file=/src/App.js
Stack Overflow用户
发布于 2022-06-16 02:50:19
首先，检查您的导入，如果样式是来自@mui/materials/styles，如果您通过样式组件导入它，您可能会遇到一些问题。
Stack Overflow用户
发布于 2022-06-16 02:47:59
看看这里：https://styled-components.com/docs/advanced
您可以使用${props => props.key}访问数据。
所以,
变化
const StyledTypography = styled(Typography)(({ theme }) => ({
variant: theme.typography.h6,
}));至
const StyledTypography = styled.div`
variant: ${props => props.variant}
`然后用适当的键访问你的对象，
例如，props.variant.theme.typography.h6。
https://stackoverflow.com/questions/72639846
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号