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

Posted 2023-02-19

【中文标题】CSS如何修复\'无效的属性值\'

【英文标题】：CSS How to fix 'Invalid property value'CSS如何修复'无效的属性值'

【发布时间】：2021-12-03 11:30:47

【问题描述】：

我正在使用 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"
  

【参考方案1】：

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

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

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

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