Emotion style overruled by antd default style

Question

I have a Gatsby project and created a component as such:

/** @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

And the style rules result in the TitleStyle being overwritten as in this example:

I have demoed this on the following Gatsby starter: https://github.com/yusugomori/gatsby-starter-antd-typescript-emotion

I am at a loss at what I can do to fix this.

score 1 · Accepted Answer · answered Sep 21 '20 at 18:05

1

This doesn't actually have anything to do with React, Gatsby, Ant Design, or Emotion, it's just CSS specificity. The selector el.foo has a higher specificity than just .foo, therefore its styles will take precedence. See How are the points in CSS specificity calculated for more detail.

You might also find the techniques for overriding styles outlined in the Ant documentation useful. Additionally, there are a handful of alternate approaches here: How to customize Ant.design styles

answered Sep 21 '20 at 18:05

coreyward

68,091
16
122
142

@coreward This is a great response, I feel like a simpleton based on the answer. I guess the follow up question is more about the implementation details of the ``. Would you not expect a component to be able to implement custom styles without having to update the less settings? The `` doesn't have this constraint if I want to update its color. – Peter W Sep 22 '20 at 02:26

Emotion style overruled by antd default style

1 Answers1