使用样式化组件更改 Ant Design 中标题组件的颜色？

Question

我正在为我的应用程序使用 Ant Design 和样式化组件。

我有一个 NavBar 组件，它使用 H1 组件。

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>
  );
};

我想更改 H1 文本的颜色，即 color: ${monochrome.offWhite}，但我似乎根本无法定位该组件。

在控制台中，它被 h1.ant-typography, .ant-typography h1 覆盖。我尝试了多种选择器来解决这个问题，但无济于事。

如何使用样式组件修改文本颜色？

Answer 1

您的样式正在被 Antd 样式覆盖，您可以添加更具体的样式来覆盖它们。

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

使用样式化组件更改 Ant Design 中标题组件的颜色？

Change color of Title Component in Ant Design using Styled Component?

css

reactjs

styled-components

antd