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中标题组件的颜色？

1 个答案: