CSS 如何修复 'Invalid property value'
CSS How to fix 'Invalid property value'
我正在使用 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';
}
在浏览器中查看我的按钮故事时,按钮没有样式并显示 'invalid property value':
将 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"
}
不是你的 React 环境有问题,只是你的 css 无效。
无需将您的 css 属性 值封装在刻度中(有些情况下您需要刻度,但 none 需要 em)。
.button {
background: #97C339;
border-radius: 30px;
color: white;
border: none;
cursor: pointer;
font-size: 18px;
height: 60px;
width: 180px;
}
去除刻度线应该可以解决问题。
我正在使用 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';
}
在浏览器中查看我的按钮故事时,按钮没有样式并显示 'invalid property value':
将 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"
}
不是你的 React 环境有问题,只是你的 css 无效。
无需将您的 css 属性 值封装在刻度中(有些情况下您需要刻度,但 none 需要 em)。
.button {
background: #97C339;
border-radius: 30px;
color: white;
border: none;
cursor: pointer;
font-size: 18px;
height: 60px;
width: 180px;
}
去除刻度线应该可以解决问题。