next.js 没有这条线，吐司上的黑暗主题就不起作用，为什么？

jfgube3f 于 2023-06-05 发布在其他

关注(0)|答案(1)|浏览(125)

我最近在我的网站上实现了一个黑暗的主题，并注意到吐司的消息在黑暗模式下无法正常显示。经过一番调查，我发现了一行代码，需要添加黑暗的主题，以正确地工作与吐司消息。我认为问题一定是来自TailwindCSS。
下面是解决这个问题的代码行：

<ToastContext.Provider value={value}>
            {children}
            {/* why without this line dark theme on toast won't work */}
            <span className='hidden error_dark warning_dark info_dark success_dark' />
            {toastQueue.map(({ id, props }) => {
                const { severity, ...rest } = props;
                const style = `${severity}${theme === 'dark' ? '_dark' : ''}`;
                return (
                    <div key={id} className={`${style}`}>
                        <Toast {...rest} />
                    </div>
                );
            })}
        </ToastContext.Provider>

此文件的完整来源：ToastContext.tsx
Tailwind配置文件：tailwind.config.js
吐司演示：demo
我已经找到了一个问题的解决方案，在我的网站上实现了一个黑暗的主题后，吐司消息在黑暗模式下无法正常显示。我添加了一行代码，其中包含一个带有特定类名的隐藏span元素，这允许dark主题正确处理吐司消息。问题可能与TailwindCSS及其配置有关。如果有人能找到更好的解决方案，我将不胜感激。”

next.js

来源：https://stackoverflow.com/questions/76363944/dark-theme-on-toast-doesnt-work-without-this-line-why

1条答案

按热度按时间

w8rqjzmb1#

根据文件：
Tailwind如何提取类名的最重要的含义是，它只会在源文件中找到作为完整的未断开字符串存在的类。
如果你使用字符串插值或将部分类名连接在一起，Tailwind将找不到它们，因此不会生成相应的CSS：

不要动态构造类名

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

在上面的例子中，字符串text-red-600和text-green-600不存在，所以Tailwind不会生成这些类。相反，请确保您使用的任何类名都完整存在：

始终使用完整的类名

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

您可以：

使用某种带有完整字符串的if语句：

{toastQueue.map(({ id, props }) => {
  const { severity, ...rest } = props;
  let style;
  if (severity == 'success') {
    style = theme === 'dark' ? 'success_dark' : 'success';
  } elseif (severity == 'info') {
    style = theme === 'dark' ? 'info_dark' : 'info';
  } elseif (severity == 'warning') {
    style = theme === 'dark' ? 'warning_dark' : 'warning';
  } elseif (severity == 'error') {
    style = theme === 'dark' ? 'error_dark' : 'error';
  }
  return (
    <div key={id} className={style}>
      <Toast {...rest} />
    </div>
  );
})}

有一个字典将severity和themeMap到适当的类名：

const DICTIONARY = {
  light: {
    success: 'success',
    // …
  },
  dark: {
    success: 'success_dark',
    // …
  },
},

// …

{toastQueue.map(({ id, props }) => {
  const { severity, ...rest } = props;
  return (
    <div key={id} className={DICTIONARY[theme ?? 'light'][severity] ?? ''}>
      <Toast {...rest} />
    </div>
  );
})}

在@layer之外的src/styles/globals.css中编写CSS规则。
safelist类：

module.exports = {
  safelist: [
    'success',
    'success_dark',
    // …
  ],
  // …
];

赞(0）回复(0）举报 2023-06-05

我来回答

next.js 没有这条线，吐司上的黑暗主题就不起作用，为什么？

1条答案

相关问题

热门标签

最新问答