如何在 React 中动态更新样式化组件？

Question

所以在我正在处理的一个项目中，我希望能够在用户更改使用 useState 设置的 currentTheme 变量并引用我在另一个文件中的一些对象时更新我网站的主题预定义的样式。我无法使用 styled-components 更新和设置这些样式。

我目前拥有它，所以每当用户更改主题（在另一个组件中完成）时，它都会更新当前选择的主题。如您所见，那里有一个console.log，并且背景颜色确实会相应更新，它只是不适用于样式组件。我想声明，我已经尝试将 styled.div 移动到我的 CodeContainer 组件中并且它在那里工作，但是当我进行更改时，应用程序的性能非常糟糕。

我基本上需要知道如何更新 styled.div 中的变量。我应该通过道具代替吗？我应该以其他方式移动它吗？不太确定在这里做什么。提前感谢您的帮助！

import React, { useState } from "react";
import Editor from "./Editor";
import { monokai, solarizedDark, terminal, textmate } from "./ui/themes";
import styled from "styled-components";

const CodeContainer = ({ setHtml, setCss, setJs, setRenderDoc, theme }) => {
  let currentTheme = monokai;

  if (theme === "textmate") {
    currentTheme = textmate;
  } else if (theme === "solarized_dark") {
    currentTheme = solarizedDark;
  } else if (theme === "terminal") {
    currentTheme = terminal;
  }

  return (
    <Container background={currentTheme}>
      <Editor
        setHtml={setHtml}
        setRenderDoc={setRenderDoc}
        languageName="html"
        theme={theme}
      />
      <Editor
        setCss={setCss}
        setRenderDoc={setRenderDoc}
        languageName="css"
        theme={theme}
      />
      <Editor
        setJs={setJs}
        setRenderDoc={setRenderDoc}
        languageName="javascript"
        theme={theme}
      />
    </Container>
  );
};

export default CodeContainer;

const Container = styled.div`
  background: ${(currentTheme) => currentTheme.background};
  height: 40vh;
  border-bottom: 4px #211e1c solid;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
`;

Answer 1

使用以下语法。 Docs.

const Container = styled.div((props) => ({
  background: props.background,
  height: "40vh",
  borderBottom: "4px #211e1c solid",
  //..
}));

注意：确保使用 camelCase 语法和 CSS 属性。