0

I am trying to set up a CRA/Typescript/Storybook with Styled Components to build a component library, however my component styles do not get applied when using the styled-components package.

Here's my 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"
  }
}

My styled component:

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';
`;

My only guess is that it has something to do with the "babel-loader":

Initially, I thought it has something to do with Storybook so I wanted to see whether the component will display the styles when running the project as an app. However, when I tried to run the app I got the same message error as described here: Problems with babel loader in react-create-app. I didn't get this error before I installed the "styled-components" and "@types/styled-components". I re-installed the project, following the instructions in the terminal (although I could never remove the babel-loader from package.json file as it was not actually listed there). This didn't help, but adding SKIP_PREFLIGHT_CHECK=true to an .env file got rid of the error and I am able to run the app. However, I still cannot see the styles for my Button component.

I am not sure if these two issues are related, but I do not get any other errors, so I don't know where to go from here. Thanks.

Aga
  • 43
  • 1
  • 4

1 Answers1

0

Don't put CSS values in quotation marks in styled-components.

BEFORE

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

CORRECT WAY

const StyledButton = styled.button`
  background: white;
`;
mhmtlgly
  • 1