[英]using dark mode in react-select
我认为更改颜色的最佳方法是使用主题道具或在文档中看起来像这样:
import { flavourOptions } from '../data';
import Select from 'react-select';
export default () => (
<Select
defaultValue={flavourOptions[2]}
label="Single select"
options={flavourOptions}
theme={theme => ({
...theme,
borderRadius: 0,
colors: {
...theme.colors,
primary25: 'hotpink',
primary: 'black',
},
})}
/>
);
但是,我并没有被困在弄清楚如何“连接”它暗模式切换..
您应该使用 CSS 变量将 colors 更改为明暗模式。 然后您可以使用 CSS 或 Sass 分别应用暗模式 styles,如下所示:
使用 SCSS:
.react-select-container {
.react-select__control {
background-color: var(--bg-secondary);
border-color: var(--border-color);
transition: none;
&:hover {
border-color: var(--border-color);
}
}
.react-select__menu {
background-color: var(--bg-secondary);
border: 1px solid var(--border-color);
}
.react-select__option {
background-color: var(--bg-secondary);
&:hover {
background-color: var(--bg-primary);
}
}
.react-select__indicator-separator {
background-color: var(--border-color);
}
.react-select__placeholder,
.react-select__single-value {
color: var(--text-primary);
}
}
我就是这样做的,但是如果有人找到更好的方法,请为这个问题做出贡献!
下面是顺风 css 使用className
和classNamePrefix
arguments 的示例:
反应用法:
<Select
className="my-react-select-container"
classNamePrefix="my-react-select"
...
顺风 CSS 索引.ZC7A62 index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
/* .my-react-select-container {
} */
.my-react-select-container .my-react-select__control {
@apply bg-white dark:bg-neutral-700 border-2 border-neutral-300 dark:border-neutral-700 hover:border-neutral-400 dark:hover:border-neutral-500;
}
.my-react-select-container .my-react-select__control--is-focused {
@apply border-neutral-500 hover:border-neutral-500 dark:border-neutral-400 dark:hover:border-neutral-400 shadow-none;
}
.my-react-select-container .my-react-select__menu {
@apply bg-neutral-100 dark:bg-neutral-700 border-2 border-neutral-300 dark:border-neutral-600;
}
.my-react-select-container .my-react-select__option {
@apply text-neutral-600 dark:text-neutral-200 bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-700 dark:hover:bg-neutral-800;
}
/* .my-react-select-container .my-react-select__option--is-focused {
@apply bg-neutral-200 dark:bg-neutral-800;
} */
.my-react-select-container .my-react-select__indicator-separator {
@apply bg-neutral-400;
}
.my-react-select-container .my-react-select__input-container,
.my-react-select-container .my-react-select__placeholder,
.my-react-select-container .my-react-select__single-value {
@apply text-neutral-600 dark:text-neutral-200;
}
}
结果:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.