Question

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

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

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

// src / gatsby-plugin-theme-ui /

中的index.js

import theme from "../theme"

export default theme

未创建错误消息。不管输入什么颜色（十六进制，rgba或其他颜色），背景都保持默认颜色

Answer 1

我想我想出了办法。

创建一个名为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，尽管它们似乎根本没有解释安装后的使用方法。

Answer 2

您可以在 Layout 组件中使用 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>
  )
}

Answer 3

我仍然无法获得记录的代码以正常工作。我发现一种解决方法是添加initialColorMode：默认并将空模式对象传递给颜色。这样一来，它就可以正确地从colors对象拾取背景，但是看起来很笨拙。

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",
  },
}

Answer 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
    },

如何使用gatsby-plugin-theme-ui调整人体背景颜色

4 个答案:

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