如何解决为什么我的 CRA/Typescript/Storybook 项目中没有应用样式组件样式?
我正在尝试使用样式化组件设置 CRA/Typescript/Storybook 来构建组件库,但是在使用 styled-components 包时我的组件样式没有得到应用。
这是我的 package.json:
{
"name": "lib","version": "0.1.0","private": true,"dependencies": {
"@testing-library/jest-dom": "^5.11.4","@testing-library/react": "^11.1.0","@testing-library/user-event": "^12.1.10","@types/jest": "^26.0.15","@types/node": "^12.0.0","@types/react": "^16.9.53","@types/react-dom": "^16.9.8","react": "^17.0.1","react-dom": "^17.0.1","react-scripts": "4.0.1","styled-components": "^5.2.1","typescript": "^4.0.3","web-vitals": "^0.2.4"
},"scripts": {
"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","storybook": "start-storybook -p 6006 -s public","build-storybook": "build-storybook -s public"
},"eslintConfig": {
"extends": [
"react-app","react-app/jest"
]
},"browserslist": {
"production": [
">0.2%","not dead","not op_mini all"
],"development": [
"last 1 chrome version","last 1 firefox version","last 1 safari version"
]
},"devDependencies": {
"@storybook/addon-a11y": "^6.1.11","@storybook/addon-actions": "^6.1.11","@storybook/addon-essentials": "^6.1.11","@storybook/addon-links": "^6.1.11","@storybook/node-logger": "^6.1.11","@storybook/preset-create-react-app": "^3.1.5","@storybook/react": "^6.1.11","@types/styled-components": "^5.1.7","@typescript-eslint/eslint-plugin": "^4.10.0","@typescript-eslint/parser": "^4.10.0","eslint": "^7.16.0","eslint-config-prettier": "^7.1.0","eslint-plugin-prettier": "^3.3.0","eslint-plugin-react": "^7.21.5","prettier": "^2.2.1"
}
}
我的样式组件:
import React from 'react';
import styled from 'styled-components';
interface Props {
type: 'button' | 'reset' | 'submit';
ariaLabel?: string;
handleClick?: () => void;
}
const Button: React.FC<Props> = ({ type = 'submit',ariaLabel,children,handleClick }) => {
return (
<StyledButton type={type} aria-label={ariaLabel} onClick={handleClick}>
{children}
</StyledButton>
);
};
export default Button;
const StyledButton = styled.button`
background: 'white';
`;
我唯一的猜测是它与“babel-loader”有关:
一开始,我觉得是和Storybook有关系,所以想看看在项目作为app运行时组件会不会显示样式。但是,当我尝试运行该应用程序时,我收到了与此处所述相同的消息错误:Problems with babel loader in react-create-app。在安装“styled-components”和“@types/styled-components”之前,我没有收到此错误。我按照终端中的说明重新安装了该项目(尽管我永远无法从 package.json 文件中删除 babel-loader,因为它实际上并未在此处列出)。这没有帮助,但是将 SKIP_PREFLIGHT_CHECK=true 添加到 .env 文件消除了错误,我能够运行该应用程序。但是,我仍然看不到 Button 组件的样式。
我不确定这两个问题是否相关,但我没有收到任何其他错误,所以我不知道从哪里开始。谢谢。
解决方法
不要在样式组件中将 CSS 值放在引号中。
之前
from register.views import ''Name of your view class''
正确的方法
const StyledButton = styled.button`
background: 'white';
`;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。