reactjs - 如何使用 Tailwind CSS 更改日历图标的颜色？

Question

我在更改帖子上日历图标的颜色时遇到问题。如果我启用了自动前缀

module.exports = {
  plugins: {
    tailwindcss: {
      config: join(__dirname, 'tailwind.config.js'),
    },
    autoprefixer: {},
  },
};

这是我的输入

 <span className="dark:text-dark-text text-xs text-gray-700">
          End Date
        </span>
        <input
          type="datetime-local"
          className="dark:bg-dark-bg mt-1 block w-full rounded border-gray-400 text-sm dark:border-gray-600 dark:text-white"
          value={value.customRangeEnd}
          onChange={onChangeCustomRangeEnd}
        />
      </label>

Answer 1

也许您正在寻找如何自定义 <input /> 的日历指示器带有 type="date" 的元素在特定的浏览器上。我假设您使用的是 Chrome，因此自定义的方法是通过 -webkit-calendar-picker-indicator伪元素。

您可以使用filter更改不透明度、色调旋转，甚至尝试 color-scheme也改变这一点。

作为建议并期望您的代码适用于所有浏览器，您可以使用一些 icon/svg 并直接更改颜色，设置 -webkit-calendar-picker-indicator类似 display: none .

This answer可以帮助您更多地了解它。

关于使用 Tailwindcss 来执行此操作，我认为您需要将这些更改添加为某种 "custom CSS"或类似的东西。