使用GatsbyJS时更改Antd的主题 [英] Change the Theme of Antd when using GatsbyJS

问题描述

此GatsbyJS/antd插件页面( https://github.com/bskimball/gatsby-plugin-antd/issues/2 )使得使用GatsbyJS时似乎可以编辑ant.design(antd)主题.提供的代码是

This GatsbyJS/antd plugin page (https://github.com/bskimball/gatsby-plugin-antd/issues/2) makes it seem that there is a way to edit ant.design (antd) themes when using GatsbyJS. The code that is provided is

plugins: [
  {
      resolve: 'gatsby-plugin-antd',
      options: {
        style: true
      }
  }
]

但是没有其他信息.在哪里可以更改主题原色之类的内容(如所述: https://ant.设计/docs/react/customize-主题). ant.design页面( https://ant.design/docs/react/customize-theme )表示通过执行以下操作来更改原色:

But there is no additional information. Where would one make changes to things like the theme primary color (as described: https://ant.design/docs/react/customize-theme). The ant.design page (https://ant.design/docs/react/customize-theme) says to make the primary color change by doing the following:

"theme": {
  "primary-color": "#1DA57A",
},

目前尚不清楚在GatbsyJS中将哪个变量设置在哪个文件中.

It is not clear in what file such a variable would be set in GatbsyJS.

推荐答案

GitHub回购示例: https://github.com/uciska/gatsby-less-v2 .要获得Antd，必须对三个Gatsby文件进行更改.

GitHub repo with an example: https://github.com/uciska/gatsby-less-v2. To get Antd working changes must be made to three Gatsby files.

gastby-config.js示例:

Example gastby-config.js:

module.exports = {
  siteMetadata: {
    title: 'My site'
  },
  plugins: [
    {
      resolve: `gatsby-plugin-less`,
      options: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#da3043',
          'font-family': 'Arial',
          'layout-body-background': '#66ff79'
        }
      }
    }
  ]
}

gastby-node.js示例:

Example gastby-node.js:

exports.onCreateBabelConfig = ({ actions }) => {
  actions.setBabelPlugin({
    name: 'babel-plugin-import',
    options: {
      libraryName: 'antd',
      style: true
    }
  })
}

示例package.json:

Example package.json:

{
  "name": "gatsby-starter-hello-world",
  "description": "Gatsby hello world starter",
  "license": "MIT",
  "scripts": {
    "develop": "gatsby develop",
    "build": "gatsby build",
    "serve": "gatsby serve"
  },
  "dependencies": {
    "antd": "^3.6.4",
    "babel-plugin-import": "^1.8.0",
    "gatsby": "next",
    "gatsby-plugin-less": "next",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-apollo": "^2.1.11"
  }
}

这篇关于使用GatsbyJS时更改Antd的主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！