Reactjs 设置暗主题不需要'；不要覆盖以前的主题

如果我更改主题的一种颜色，则主题将保持原样

但是，如果我尝试更新调色板类型，它将不起作用。创造一个新的主题就行了。但在这种情况下，我失去了我以前所有的修改

当前行为

如果替代颜色，调色板类型将保持原样。 如果我覆盖调色板类型。它不起作用。 如果使用新的调色板类型创建一个新主题，它会工作，但会丢失以前的更改

预期行为 更改调色板类型时，我仍然可以看到我的原色

复制步骤

步骤：

单击“更改主题”按钮。您将看到主题是如何切换的。原色是蓝色

单击“更改为随机颜色”。您将看到原色是如何变化的。主题是一样的

单击“更改主题”按钮。您将看到主题是如何切换的。原色又变成了蓝色

---

您遇到了问题，因为您尝试使用空对象或从material ui完全生成的主题对象

解决问题的一个简单方法是通过上下文传递当前主题，并在此基础上创建一个新主题。这将使material ui根据dark/light类型生成主题的所有其他值

函数themecstomprovider（{children}）{
const[theme，setTheme]=React.useState（defaultTheme（））；
返回(
{儿童}
);
}

在您的组件中，我们将使用

lodash/merge

将旧主题与新值合并

const{theme，setTheme}=useThemeSetContext（）；//函数taht将更新主题
常量handleChangeDark=（）=>{
常数newTheme=merge(
{}，//使用一个新对象。我们不会在React中改变数据
主题，//复制旧的主题值
{
调色板：{
类型：theme.palette.type==“亮”？“暗”：“亮”
}
}
);
setTheme（newTheme）；//使用只有change dark类型的新主题更新主题
设置消息(
主题在暗色和浅色之间变化，但会覆盖原色，因此原色始终为蓝色
);
};
常量handleChangeColor=（）=>{
常数newTheme=merge(
{},
主题
{
调色板：{
主要：{
main:getRandomColor（）//新值
}
}
}
);
setTheme（newTheme）；//使用新对象更新主题，该对象保留以前的值，如调色板类型
设置消息(
主题更改原色，使主题保持暗/亮主题
);
};

以下是您的codesandbox，已使用以下更改进行更新：

---

Hi@abumalick。非常感谢你的帮助。它在CodeSandbox上工作。出于未知的原因，它在我的代码中不起作用，但您找到了一个解决方案。这里是我的改进，以保持修改主题的上下文提供程序像往常一样干净：你是对的@PabIy它比你做的干净多了。干得好：+1: