GatsbyJS Typography插件的CSS被覆盖

时间:2019-09-25 17:14:44

标签: gatsby antd typography

我有一个带有TypographyJS(通过Gatsby插件)和Ant Design UI框架的GatsbyJS应用。排版插件是根据官方文档here

添加的

要使ant design CSS工作,您必须根据here的文档gatsby-browser.js将ant design css导入

蚂蚁设计CSS覆盖了版式插件样式。 我想在字体等字体上使用ant设计样式。

gatsby-browser.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'

typography.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

0 个答案:

没有答案