情感风格被antd默认风格所取代

问题描述

我有一个Gatsby项目，并创建了一个这样的组件：

/** @jsx jsx */
import { jsx,css } from '@emotion/core'
import styled from '@emotion/styled'
import { Link } from 'gatsby'
import React from 'react'

import { AntDesignOutlined } from '@ant-design/icons'
import { Layout,Typography } from 'antd'
const AntHeader = Layout.Header
const { Title } = Typography

type Props = {
  siteTitle: string
}

const Header: React.FC<Props> = ({ siteTitle }) => (
  <AntHeader>
    <div>
      <h1>
        <Link to="/" css={LinkStyle}>
          <AntDesignOutlined />
          {` `}
          {siteTitle}
        </Link>
      </h1>
      <TitleStyled>Title</TitleStyled>
    </div>
  </AntHeader>
)

Header.defaultProps = {
  siteTitle: ``,}

const TitleStyled = styled(Title)`
  color: red;
`

const LinkStyle = css`
  color: #fff;
`

export default Header

样式规则导致TitleStyle被覆盖，如下例所示：

我已在以下Gatsby入门程序上进行了演示：https://github.com/yusugomori/gatsby-starter-antd-typescript-emotion

我无能为力地解决此问题。

解决方法

这实际上与React，Gatsby，Ant Design或Emotion没有任何关系，只是CSS的特殊性。选择器el.foo的特异性比.foo高，因此其样式将优先。有关更多详细信息，请参见How are the points in CSS specificity calculated。

您可能还会发现techniques for overriding styles outlined in the Ant documentation有用。此外，这里还有一些替代方法：How to customize Ant.design styles