I am currently integrating Ant Design with styled components in my project.
One of the components in my application is a NavBar that includes an 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<H1Props> = ({ children, ...rest }) => {
return (
<TypographyWrapper>
<Title style={{ margin: '0px' }} {...rest}>
{children}
</Title>
</TypographyWrapper>
);
};
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<NavbarProps> = () => {
return (
<Wrapper>
<StyledH1>{NavbarConstants.NAVBAR_TITLE}</StyledH1>
</Wrapper>
);
};
I'm trying to customize the color of the text in the H1 component, specifically color: ${monochrome.offWhite}, but I'm having trouble selecting and targeting the component.
In the console, it seems to be overridden by
h1.ant-typography, .ant-typography h1How can I successfully change the text color using styled components?