本文介绍了与 Typescript 一起使用的 ThemeProvide
出现错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想创建一个组件
const StyledDiv = styled.div`
width: 10rem;
height: 3rem;
border-radius: 0.2rem;
background-color: ${({ theme, colorVariant, colorType }) => theme.colors[colorType].
[colorVariant]}
`;
但是显示错误
属性colorVariant"在类型Pick
这是我设置的主题
export default {
'colors' : {
'blue' : {
'100' : '#232f3e',
'200' : '#233d51',
'300' : '#006170',
'400' : '#008296',
'450' : '#008091',
'500' : '#d4e4e6',
'600' : '#e5f2f3',
},
'grey' : {
'600' : '#8ca1a3',
'700' : '#768283',
'800' : '#e7e9e9',
'900' : '#ffffff',
},
'red' : {
'1000' : '#b40909',
},
'green' : {
'1100' : '#417505',
},
'yellow' : {
'1200' : '#f5a623',
}
}
};
推荐答案
你在使用 styled-components 吗?如果是这样，似乎 div 方法也将参数作为您需要的扩展道具.这就是我的意思:
Are you using styled-components? If so, it seems the div method also takes an argument as extended props what you need. This is what I meant:
const StyledDiv = styled.div<{ colorVariant: string, colorType: string }>`
width: 10rem;
height: 3rem;
border-radius: 0.2rem;
background-color: ${({ theme, colorVariant, colorType }) => theme.colors[colorType].
[colorVariant]}
`;
发布评论