Изменить цвет компонента заголовка в Ant Design с помощью стилизованного компонента? ⇐ CSS

[Anonymous]

I am using Ant Design alongside styled components for my application.

I have a NavBar which component which uses a H1 Component.

H1.tsx

Код: Выделить всё

import React from 'react';
import { Typography } from 'antd';
import styled from 'styled-components';

const { Title } = Typography;

const TypographyWrapper = styled.div`
font-family: 'Muli', sans-serif;
`;

interface H1Props {
children?: String;
}

export const H1: React.SFC = ({ children, ...rest }) => {
return (


{children}


);
};

export default H1;

Navbar.tsx

Код: Выделить всё

import React from 'react';
import { primary, monochrome } from '../colors/Colors';
import styled from 'styled-components';
import { NavbarConstants } from '../../config/stringConstants';
import H1 from '../typography/H1';

const Wrapper = styled.div`
background-color: ${primary['Blue-400']}
width: 100%;
display: flex;
flex-direction: row;
padding: 30px;
align-items: center;
`;

const StyledH1 = styled(H1)`
color: ${monochrome.offWhite};
`;

interface NavbarProps {}

export const Navbar: React.SFC = () => {
return (

{NavbarConstants.NAVBAR_TITLE}

);
};

I am looking to change the color of the H1 text i.e.

Код: Выделить всё

color: ${monochrome.offWhite}

but I cannot seem to target the component at all.

From the console, it is override by

Код: Выделить всё

h1.ant-typography, .ant-typography h1

. I tried variations of selectors to target this, but to no avail.

How can I modify the text color using styled components?


Источник: https://stackoverflow.com/questions/590 ... -component