Блог

Когда я использую props внутри моего стилизованного компонента, я просто продолжаю получать ошибку ошибки несоответствующего свойства. Я использую инструмент WebStorm Inspector code и 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);
`;
  

Когда я запускаю код проверки, я получаю это:

Попробуйте удалить кавычки из свойств цвета: вот так

   background: orange
  

вместо

 background: 'orange'