I'm creating a React component library using the TSDX react-with-storybook template. However, I can't seem to get CSS to work in my components via import.

Here is a my button component:

import React, { FC, HTMLAttributes } from 'react';
import './button.css';

export interface ButtonProps extends HTMLAttributes<HTMLButtonElement> {
   text: string;
}

export const Button: FC<ButtonProps> = ({ text }) => {
   return <button className="button">{text.toLowerCase()}</button>;
};

Here is my css:

.button {
  background: '#97C339';
  border-radius: '30px';
  color: 'white';
  border: 'none';
  cursor: 'pointer';
  font-size: '18px';
  height: '60px';
  width: '180px';
}

When viewing my button story in the browser the button has no styling and shows 'invalid property value':

What are the best practises in terms of applying css to a react based library?

Here is my package.json:

  "devDependencies": {
    "@babel/core": "^7.15.8",
    "@size-limit/preset-small-lib": "^6.0.2",
    "@storybook/addon-essentials": "^6.3.10",
    "@storybook/addon-info": "^5.3.21",
    "@storybook/addon-links": "^6.3.10",
    "@storybook/addons": "^6.3.10",
    "@storybook/react": "^6.3.10",
    "@types/react": "^17.0.28",
    "@types/react-dom": "^17.0.9",
    "babel-loader": "^8.2.2",
    "husky": "^7.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-is": "^17.0.2",
    "rollup-plugin-postcss": "^4.0.1",
    "size-limit": "^6.0.1",
    "tsdx": "^0.14.1",
    "tslib": "^2.3.1",
    "typescript": "^4.4.3"
  }

CodePudding user response：

Not a problem with your React environment, its just that your css is invalid.

Theres no need to encapsulate your css property values in ticks (there are some occasions you need ticks, but none of your's need em).

.button {
  background: #97C339;
  border-radius: 30px;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  height: 60px;
  width: 180px;
}

Removing the ticks should do the trick.