gatsby - GatsbyJS Typography 插件的 css 被覆盖

Question

我有一个带有 TypographyJS（通过 Gatsby 插件）和 Ant Design UI 框架的 GatsbyJS 应用程序。排版插件是在官方文档之后添加的，here

要使 ant design CSS 工作，您必须gatsby-browser.js根据他们的文档在文件中导入 ant design css，这里

ant design css 覆盖了排版插件样式。我想将 ant 设计样式与字体等的排版结合使用。

盖茨比浏览器.js

/**
 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/browser-apis/
 */

// You can delete this file if you're not using it
import 'antd/dist/antd.css'

排版.js

import Typography from "typography"
import fairyGateTheme from "typography-theme-fairy-gates"

/**
 * Issue:
 * Fairy Gates Theme: Messed up text shadow in default starter project header
 * 
 * Solution:
 * https://github.com/KyleAMathews/typography.js/issues/155#issuecomment-490715480
 */
fairyGateTheme.overrideThemeStyles = () => ({
  a: {
    textShadow: `none`,
    backgroundImage: `none`,
  },
});

const typography = new Typography(fairyGateTheme)

export const { scale, rhythm, options } = typography
export default typography

标签： gatsbyantdtypography