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

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;

I want to change text color to rgb(140, 140, 140) . However color does not changed.

I use Header component in other component like below.

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

if I set background-color: yellow; , it applied well.

Because of this, I am confused. Some styles are working and other styles are not working...

Answer 1

Try this:

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