文章/答案/技术大牛

发布

社区首页 >问答首页 >反应材料UI v5与TypeScript的样式

问反应材料UI v5与TypeScript的样式
EN

Stack Overflow用户

提问于 2022-03-17 12:49:11

回答 2查看 292关注 0票数 1

样式印刷术接受所有默认的排版道具。当我在styled()和样式之间添加时，它也接受额外的道具。

const StyledTypography = styled(Typography)<ExtraProps>({})

我的问题是:当我呈现带有支柱“组件”或"as“的样式字体组件时，它不接受动态组件道具。

示例：

<StyledTypography component={Link} to="/test">demo</StyledTypography>

(链接来自react路由器-dom)

它无法找到“链接”组件中的“到”支柱，从而导致错误。默认排版接受组件参数排版，但使用样式扩展默认排版的版本则不接受。

如何使样式组件接受来自动态组件的新道具。

(我知道as={(道具) =>

reactjs

typescript

material-ui

styled-components

react-typescript

回答 2

Stack Overflow用户

发布于 2022-03-17 17:10:00

这

styled(Typography)({}) as typeof Typography | FC<ExtraProps>

或者这个

const StyledTypography: (typeof Typography | FC<ExtraProps>) = styled....

效果很好。

但这并不是最好的答案。应该有个更好的

票数 0

Stack Overflow用户

发布于 2022-03-17 21:51:00

尝试像这样的东西，做一些state=“布尔”，然后尝试将道具传递给您的样式组件。

const，seToggle = useState(flase)；

StyledTypography =样式(排版)({

背景色：${(道具) =>

   (props?.cardToggle ? 'lightgrey' : 'white')};

})`

<StyledTypography onclick={()=> setToggle(!toggle)} toggle={toggle} component={Link} to="/test">demo</StyledTypography>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/71512576

复制

相似问题

问反应材料UI v5与TypeScript的样式
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应材料UI v5与TypeScript的样式EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问反应材料UI v5与TypeScript的样式
EN