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

【问题标题】：Mismatched property value in styled components样式化组件中的属性值不匹配
【发布时间】：2021-01-06 16:15:24
【问题描述】：

当我在我的样式化组件中使用道具时，我只是不断收到错误不匹配的属性错误。我使用 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, 255, 0.7);
`;

当我运行检查代码时，我得到这个：

【问题讨论】：

标签： reactjs webstorm eslint styled-components

【解决方案1】：

尝试从颜色属性中删除引号：像这样

  background: orange

而不是

background: 'orange'

【讨论】：