CSS如何修复“无效属性值”

Question

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

下面是一个my button组件：

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应用于基于react的库方面，最佳实践是什么？

这是我的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属性值封装在ticks中(在某些情况下，您需要ticks，但您的都不需要ticks)。

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

去掉勾号应该能起到这个作用。