2

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

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

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

主题.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.jssrc/gatsby-plugin-theme-ui/：

import theme from "../theme"

export default theme

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

4

4 回答 4

4

我想我想出了一个办法。

创建一个名为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，尽管它们似乎根本没有解释如何在设置后使用。

于 2019-09-03T08:24:45.140 回答
2

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

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",
  },
}
于 2019-07-26T20:29:39.787 回答
1

您可以createGlobalStyle在 Layout 组件中使用、导入并设置它。在我的例子中，我用它来改变背景颜色和应用渐变，你可以在这里查看官方网站

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>
  )
}
于 2021-05-12T00:31:52.897 回答
0

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

这绝对是主题 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
    },
于 2021-06-11T04:15:47.200 回答