css - CSS如何修复'无效的属性值'

Question

我正在使用 TSDX react-with-storybook 模板创建一个 React 组件库。但是，我似乎无法通过导入让 CSS 在我的组件中工作。

这是我的按钮组件：

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>;
};

这是我的CSS：

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

在浏览器中查看我的按钮故事时，该按钮没有样式并显示“无效的属性值”：

将 css 应用于基于反应的库方面的最佳实践是什么？

这是我的 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"
  }

Answer 1

你的 React 环境没有问题，只是你的 css 无效。

无需将您的 css 属性值封装在刻度中（在某些情况下您需要刻度，但您都不需要 em）。

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

去除蜱虫应该可以解决问题。