如何解决样式化组件中的属性值不匹配
当我在样式化组件中使用props时,我只会不断收到错误,不匹配的属性错误。我使用WebStorm Inspector代码工具和ESLint。
这是我的.eslint.json
{
"env": {
"node": true,"browser": true,"es6": true
},"extends": [
"eslint:recommended","plugin:react/recommended","plugin:@typescript-eslint/recommended"
],"globals": {
"Atomics": "readonly","SharedArrayBuffer": "readonly"
},"parser": "@babel/eslint-parser","parserOptions": {
"ecmaFeatures": {
"jsx": true,"modules": true,"experimentalObjectRestSpread": true
},"ecmaVersion": 2018,"sourceType": "module"
},"plugins": [
"react","redux-saga"
]
}
这是我样式化的组件
export const LabelButton = styled.div<{ active?: boolean }>`
background: ${(props) => (props.active ? "#1E88E5" : "#2196f3")};
color: rgba(255,255,0.7);
`;
解决方法
尝试从颜色属性中删除引号:像这样
background: orange
代替
background: 'orange'
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。