javascript - 如何使用样式组件键入 Ant 设计?
问题描述
这是我公司代码审查中的一个经典点,通常我们会围绕使用 Ant 组件的样式化组件来工作:
const StyledInput = styled<any>(InputAnt)`
${p =>
p.hasError &&
`
border-color: ${p.theme.red};
`}
`
远非理想,因为它的行为与任何其他组件一样,需要更严格的类型。有趣的是,显而易见的方法仅适用于某些组件。看
interface ButtonP extends NativeButtonProps {
isCustomProp: boolean
}
export const Button = styled<ButtonP>(p => <AntButton {...p} />)`
color: ${p => p.isCustomProp ? 'pink' : 'steelblue'};
`
但是,其他组件将需要不同的类型机制。例如,与 Ant 的 Input 相同的方法将不起作用!:
interface StyledInputP extends InputProps {
hasError: boolean
}
const StyledInput = styled<StyledInputP>(p => <InputAnt {...p} />)`
${p =>
p.hasError &&
`
border-color: ${p.theme.red};
`}
`
是否有指南或答案可以一劳永逸地解决这个问题!?
干杯
解决方案
你可以尝试像这样修改
interface StyledInputP extends InputProps {
hasError: boolean
}
const StyledInput = styled((p: StyledInputP) => <Input {...p} />)`
${p =>
p.hasError &&
`
border-color: ${p.theme.red};
`}
`;
推荐阅读
- vba - 如何用VBA重命名中文命名文件?
- c - 将字符串复制到 Clang 函数中的指针失败
- python - python 在使用 text_box.get() 时没有将 str 值转换为 int (在 Tkinter 中)
- java - 如何在@PrePersist 方法中获取类对象
- django - corss 域登录问题 sessionid cookie 未在 aws eb 上的 django-graphql 后端 api 中设置
- powershell - 如何根据使用 PowerShell 选择的文件夹自动创建复选框?
- sql - Oracle XMLtable 提供交叉连接的数据
- c# - 从 JavaScript 调用 .razor 页面中的实例方法
- javascript - 基于正则表达式的行删除脚本(JS)不起作用
- java - 有没有办法让 java.awt.Choice 进一步下拉?