antd默认风格否决了情感风格

Question

我有一个 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 starter 上演示了这个：https://github.com/yusugomori/gatsby-starter-antd-typescript-emotion

我不知该如何解决这个问题。

Answer 1

这实际上与 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 useful. Additionally, there are a handful of alternate approaches here:

antd默认风格否决了情感风格

Emotion style overruled by antd default style

css

emotion

reactjs

gatsby

antd