样式化组件中的属性值不匹配

问题描述

当我在样式化组件中使用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'