javascript - 功能组件中的样式化组件不会将样式应用于组件

Question

import React from 'react';
import styled from 'styled-components';
import { Typography } from 'antd';
const { Title } = Typography;
const StyledTitle = styled(Title)`
    align-self: center;
    color: rgb(140, 140, 140);
`;
export function Header(props : {children : React.ReactNode}) {
    return <StyledTitle>{props.children}</StyledTitle>;
}
export default Header;

我想将文本颜色更改为rgb(140, 140, 140). 但是颜色没有改变。

我Header在其他组件中使用组件，如下所示。

import { Header } from './Header';
export function Login() {
    return(
        <Container>
            <Header>Login</Header>
        </Container>
    );
}

如果我设置background-color: yellow;，它适用。

正因为如此，我很困惑。有些样式有效，有些样式无效...

标签： javascriptcssreactjsstyled-components

Answer 1

尝试这个：

color: rgb(140, 140, 140)!important;