如何使用 gatsby-plugin-theme-ui 调整正文背景颜色答案

【问题标题】：How to adjust body background color with gatsby-plugin-theme-ui如何使用 gatsby-plugin-theme-ui 调整正文背景颜色
【发布时间】：2019-12-04 23:02:35
【问题描述】：

在使用 gatsby-plugin-theme-ui 构建 Gatsby 主题时，文档指出您可以通过将主体添加到嵌套颜色对象中的主题对象来调整主体的背景颜色。这似乎没有效果。其他变量（例如字体和样式）正确引入，但除了在单个元素上调整它之外，我似乎无法改变背景。是否有额外的步骤可以让它发挥作用？

使用setInitialMode 并定义暗模式能够更改背景，但这似乎是一个hacky 解决方案，因为我没有尝试构建主题颜色切换。

这是我在src/目录下的主题配置文件：

theme.js

export const theme = {
  space: [0, 4, 8, 16, 32],
  fonts: {
    body: "Alegreya Sans SC, system-ui, sans-serif",
    heading: `Archivo Black, system-ui, sans-serif`,
  },
  fontSizes: [16, 18, 20, 22, 27, 36, 72],
  lineHeights: {
    body: 1.45,
    heading: 1.1,
  },
  colors: {
    background: "blue",
    text: "purple",
    primary: "purple",
  },
  sizes: {
    default: "90vw",
    max: "540px",
  },
  styles: {
    body: {
      margin: 0,
      padding: 0,
    },
    h1: {
      color: "primary",
      fontSize: 6,
      fontWeight: "bold",
      lineHeight: "heading",
      fontFamily: "heading",
    },
    ul: {
      borderTop: "1px solid",
      borderColor: "gray.0",
      listStyle: "none",
      padding: 0,
    },
    li: {
      borderBottom: "1px solid",
      borderColor: "gray.1",
      padding: 2,
      "&:focus-within,&:hover": {
        backgroundColor: "gray.0",
      },
    },
  },
}

export default theme

index.js 在src/gatsby-plugin-theme-ui/ 目录中：

import theme from "../theme"

export default theme

没有创建错误消息。无论输入什么颜色（十六进制、rgba 或其他），背景都将保持默认颜色。

【问题讨论】：

标签： themes gatsby theme-ui

【解决方案1】：

我仍然无法让文档中的代码正常工作。我发现的一种解决方法是添加 initialColorMode: default 并将空模式对象传递给颜色。这使得它在该点从颜色对象中正确拾取背景，但看起来很hacky。

export const theme = {
  initialColorMode: `default`,
  space: [0, 4, 8, 16, 32],
  fonts: {
    body: "Alegreya Sans SC, system-ui, sans-serif",
    heading: `Archivo Black, system-ui, sans-serif`,
  },
  fontSizes: [16, 18, 20, 22, 27, 36, 72],
  lineHeights: {
    body: 1.45,
    heading: 1.1,
  },
  colors: {
    background: "white",
    text: "black",
    primary: "#111",
    accent: "white",
    modes: {},
  },
  sizes: {
    default: "90vw",
    max: "540px",
  },
}

【讨论】：

肯定有一些奇怪的东西，我也无法重现 gatsby 的 theme-ui 文档。我认为它应该开箱即用，但事实并非如此。无论是这样还是哲学都是在风格定义中创造一种高度神秘冗长的紧迫感。

【解决方案2】：

我想我想出了一个办法。

创建一个名为Global的组件。

import React from 'react'
import { Global } from '@emotion/core'

export default props =>
  <Global
    styles={theme => ({
      body: {
        color: theme.colors.text,
        backgroundColor: theme.colors.background,
      }
    })}
  />

然后将其导入您的index.js，如下所示。

// with your imports
import { Global } from '@emotion/core'

// then in the return portion of the function
return (
    <>
      <Global />
      {...otherComponents}
    </>
  )

组件Global 的设置部分来自theme-ui docs，尽管它们似乎根本没有解释设置后如何使用。

【讨论】：

【解决方案3】：

您可以在布局组件中使用createGlobalStyle，导入并设置它。就我而言，我用它来改变背景颜色和应用渐变，你可以查看官方网站here

import React from "react"
import { LayoutWrapper } from "./styles"
import { createGlobalStyle } from "styled-components"

const GlobalStyle = createGlobalStyle`
  body {
    height: 100%;
    background: linear-gradient(to left, #ddd6f3 0%, #faaca8 100%);
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
`
export function Layout({ children }) {
  return (
    <LayoutWrapper>
      <GlobalStyle />
      <main>{children}</main>
    </LayoutWrapper>
  )
}

【讨论】：

【解决方案4】：

将样式的属性包装在根对象中！！！

这绝对是主题ui的问题。在主题 ui 索引文件中的样式对象中。您需要将样式包装在根目录中

gatsby-plugin-theme-ui/index.js

  color: {},
  breakpoints:[],
  styles: {
    root: { // wrap in root object. this is the way
      fontFamily: 'body',
      lineHeight: 'body',
      fontWeight: 'body',
      minHeight: '100vh',
      backgroundColor: 'blue', // this is what you want
      h1: {
        variant: 'text.heading',
        fontSize: 5,
      },
      h2: {
        variant: 'text.heading',
        fontSize: 4,
      },
      ...rest
    },

【讨论】：