根据选定的 DaisyUI 主题反应热吐司背景主题答案

【问题标题】：React hot toast background theme depending on selected DaisyUI theme根据选定的 DaisyUI 主题反应热吐司背景主题
【发布时间】：2022-08-15 04:58:00
【问题描述】：

我的项目中有 DaisyUI 主题，它将标签的 data-theme=\"\" 设置为它的选定主题。有关此链接的更多信息https://daisyui.com/docs/themes/

我正在尝试让react-hot-toast 通知更改其样式，具体取决于选择的主题，就像整个应用程序正在做的那样。问题是我没有找到一种方法来根据选择的主题动态设置默认 toast 消息的样式我希望这样：

添加 className: \'bg-primary\' 作为 DaisyUI 主题的默认背景。唯一对我有用的是样式对象中的“硬编码”背景颜色。

<Toaster
  toastOptions={{
    className: \'bg-primary\',
    style: {
      border: \'1px solid #713200\',
      padding: \'16px\',
      color: \'#713200\',
    },
  }}
/>

有谁知道如何根据所选的 DaisyUI 主题为 toast 通知动态添加背景颜色？

标签： reactjs themes tailwind-css toast daisyui

【解决方案1】：

我不熟悉 Daisy UI，但如果它使用 SCSS 变量，您可以将它们拉入 SCSS 模块文件，然后将该模块拉入您的 React 组件。 SCSS 模块需要遵循<YOURFILENAME>.module.scss 的命名约定，并且还需要在定义变量后导出变量。下面是一个例子：

myvars.module.scss

@import "path/to/daisyui_variables_file";

$background: $name_of_daisyui_bg_variable;
$some_other_variable_name: $some_other_daisyui_variable;

:export {
  background: $name_of_daisyui_bg_variable;
  some_other_variable_name: $some_other_variable_name;
}

请注意，您需要找到实际的来自 DaisyUI 的变量名，并将 $name_of_daisyui_bg_variable 替换为任何变量。

然后在您的反应组件中，您可以执行以下操作：

import * as scss from "./myvars.module.scss";

<Toaster
  toastOptions={{
    className: 'bg-primary',
    style: {
      border: '1px solid #713200',
      padding: '16px',
      color: '#713200',
      background: scss.background
    },
  }}
/>

【讨论】：