为啥 styled-components 样式没有应用到我的 CRA/Typescript/Storybook 项目中？

Posted 2023-02-19

【中文标题】为啥 styled-components 样式没有应用到我的 CRA/Typescript/Storybook 项目中？

【英文标题】：Why styled-components styles do not get applied in my CRA/ Typescript/ Storybook project?为什么 styled-components 样式没有应用到我的 CRA/Typescript/Storybook 项目中？

【发布时间】：2021-04-01 07:38:21

【问题描述】：

我正在尝试使用 Styled Components 设置 CRA/Typescript/Storybook 来构建组件库，但是在使用 styled-components 包时我的组件样式没有得到应用。

这是我的 package.json：

  "name": "lib",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "styled-components": "^5.2.1",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.4"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 6006 -s public",
    "build-storybook": "build-storybook -s public"
  ,
  "eslintConfig": 
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  ,
  "devDependencies": 
    "@storybook/addon-a11y": "^6.1.11",
    "@storybook/addon-actions": "^6.1.11",
    "@storybook/addon-essentials": "^6.1.11",
    "@storybook/addon-links": "^6.1.11",
    "@storybook/node-logger": "^6.1.11",
    "@storybook/preset-create-react-app": "^3.1.5",
    "@storybook/react": "^6.1.11",
    "@types/styled-components": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.10.0",
    "@typescript-eslint/parser": "^4.10.0",
    "eslint": "^7.16.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-prettier": "^3.3.0",
    "eslint-plugin-react": "^7.21.5",
    "prettier": "^2.2.1"
  

我的样式化组件：

import React from 'react';
import styled from 'styled-components';

interface Props 
  type: 'button' | 'reset' | 'submit';
  ariaLabel?: string;
  handleClick?: () => void;


const Button: React.FC<Props> = ( type = 'submit', ariaLabel, children, handleClick ) => 
  return (
    <StyledButton type=type aria-label=ariaLabel onClick=handleClick>
      children
    </StyledButton>
  );
;

export default Button;

const StyledButton = styled.button`
  background: 'white';
`;

我唯一的猜测是它与“babel-loader”有关：

最初，我认为它与 Storybook 有关，所以我想看看组件在将项目作为应用程序运行时是否会显示样式。但是，当我尝试运行该应用程序时，我收到了与此处所述相同的消息错误：Problems with babel loader in react-create-app。在安装“styled-components”和“@types/styled-components”之前，我没有收到此错误。我按照终端中的说明重新安装了该项目（尽管我永远无法从 package.json 文件中删除 babel-loader，因为它实际上并未在此处列出）。这没有帮助，但是将 SKIP_PREFLIGHT_CHECK=true 添加到 .env 文件可以消除错误，我可以运行该应用程序。但是，我仍然看不到 Button 组件的样式。

我不确定这两个问题是否相关，但我没有收到任何其他错误，所以我不知道从哪里开始。谢谢。

【参考方案1】：

不要在样式组件中将 CSS 值放在引号中。

之前

const StyledButton = styled.button`
  background: 'white';
`;

正确的方式

const StyledButton = styled.button`
  background: white;
`;