[英]Overwriting styled component 3 times?
I'm using react-bootstrap and styled components on a project and am having issues with extending styles link to docs我在项目中使用 react-bootstrap 和样式化组件,并且在将 styles 链接扩展到文档时遇到问题
For example, im importing and overriding a bootstrap button component:例如,我导入并覆盖了引导按钮组件:
import styled from 'styled-components';
import Button from 'react-bootstrap/Button';
export const PrimaryButton = styled(Button)`
background-color: ${props => props.theme.purple300};
font-size: 1.25rem;
font-weight: 700;
color: #FFFFFF;
padding: 5px 50px;
border: none;
border-radius: 30px;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
`;
this is a good start, however, I want to override this in several locations as well, so something like:这是一个好的开始,但是,我也想在几个位置覆盖它,比如:
import {Button} from './button.style'
const AuthButton = styled(Button)`
background-color: red;
`;
....
<AuthButton type='submit'>Sign In</AuthButton>
AuthButton
should have 3 classes (bootstrap, the first styled component, and then the second), but I'm seeing everything except the AuthButton styles/class. AuthButton
应该有 3 个类(引导程序,第一个样式组件,然后是第二个),但是我看到了除 AuthButton 样式/类之外的所有内容。 I don't see the background-color: red;
我没有看到
background-color: red;
anywhere in the DOM. DOM 中的任何位置。 I've tried increasing specificity using
&&&
and still nothing.我尝试使用
&&&
增加特异性,但仍然没有。
Is this a limitation with styled components or am I doing something wrong?这是样式组件的限制还是我做错了什么?
you need pass className
as a props to your component您需要将
className
作为道具传递给您的组件
I fixed this.我解决了这个问题。 It was due to not having a className prop in my Button component: https://www.styled-components.com/docs/basics#styling-any-component
这是由于我的 Button 组件中没有 className 道具: https://www.styled-components.com/docs/basics#styling-any-component
EDIT: Since the mods are absolutely horrendous on SO, I will add an example:编辑:由于模组在 SO 上绝对可怕,我将添加一个示例:
function MyComponent({className}) { ... }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.