1

我遇到了一个“问题”，这让我觉得我为我想要的东西选择了错误的堆栈。我对 React 和 Typescript 很陌生，但我想知道是否有人也知道以下方法。

主题.ts

import { createGlobalStyle } from "styled-components"
import { ThemeType } from "../types/theme"

export const lightTheme = {
    background: "#F2F3EF",
    text: "#252524",
}

export const darkTheme = {
    background: "#1C282B",
    text: "#F2F3EF",
}

export const GlobalStyles = createGlobalStyle<{ theme: ThemeType }>`
  body {
    margin: 0;
    margin-left: 300px;
    background: ${({ theme }) => theme.background};
    color: ${({ theme }) => theme.text};
    font-family: Tahoma, Helvetica, Arial, Roboto, sans-serif;
  }
`

样式.ts

import { css } from "astroturf"
import { useTheme } from "styled-components"

const theme = useTheme()

const styles = css`
    .navContainer {
        width: 300px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    .themeToggle {
        position: absolute;
        bottom: 0;
        text-align: left;
        padding: 15px;
    }

    .logo {
        padding: 20px;
    }

    .menuItems {
        a {
            text-decoration: none;
            display: block;
            padding: 5px;
        }
        a.light:hover {
            background-color: ${({ theme }) => theme.background};
        }
        a.dark:hover {
            background-color: ${({ theme }) => theme.background};
        }
    }
`
export default styles

我收到以下错误消息，这确实有意义

无法将插值解析为值、css 返回的类名或样式化组件。所有插值样式的组件必须在同一个文件中，并且值必须在编译时静态确定

我正在使用 postcss 运行 webpack，但也尝试使用样式组件中的主题。最终目标是使用拨动开关将主题从亮/暗更改，但我只需要一些关于我应该采取什么方法的指导。显然，用 astroturf 为 postcss 实现 css-in-js 将会对我使用主题的方式产生问题，但我想在我把它撕掉之前问你们。

可能有一个我缺少的简单解决方案。我尝试只导入变量 light 和 dark，然后尝试在我的 css 字符串中使用这些变量，但这也不起作用。

提前致谢

4

0 回答 0