css - 使用 css 后代选择器反应主题
问题描述
这是我如何将工具提示编码为具有明暗主题的片段反应代码。它定义了工具提示的位置。我想通过使用主题来解决这个问题,但我不确定如何:
static defaultProps = {
theme: 'light',
eventsEnabled: true,
};
firstOrderPlacement(placement) {
if (!placement) return null;
return placement.split('-')[0];
}
arrowDirectionClass(firstOrderPlacement) {
const { theme } = this.props;
switch (firstOrderPlacement) {
case 'right':
return cx(css.arrowLeft, theme === 'dark' ? css.arrowLeftDark : css.arrowLeftLight);
case 'left':
return cx(css.arrowRight, theme === 'dark' ? css.arrowRightDark : css.arrowRightLight);
case 'top':
return cx(css.arrowDown, theme === 'dark' ? css.arrowDownDark : css.arrowDownLight);
case 'bottom':
return cx(css.arrowUp, theme === 'dark' ? css.arrowUpDark : css.arrowUpLight);
default:
return cx(css.arrowUp, theme === 'dark' ? css.arrowUpDark : css.arrowUpLight);
}
}
及其职位的CSS:
.backgroundLight {
background: white;
color: #262626;
}
.backgroundDark {
background: #2d2d2d;
color: #ffffff;
}
.arrow {
position: relative;
width: 0;
height: 0;
}
.arrowRight {
border-top: 0.4375rem solid transparent;
border-bottom: 0.4375rem solid transparent;
}
.arrowRightLight {
border-left: 0.4375rem solid var(--color-white);
}
.arrowRightDark {
border-left: 0.4375rem solid #2d2d2d;
}
.arrowLeft {
border-top: 0.4375rem solid transparent;
border-bottom: 0.4375rem solid transparent;
}
.arrowLeftLight {
border-right: 0.4375rem solid var(--color-white);
}
.arrowLeftDark {
border-right: 0.4375rem solid #2d2d2d;
}
.arrowDown {
margin: 0 auto;
border-left: 0.4375rem solid transparent;
border-right: 0.4375rem solid transparent;
}
.arrowDownLight {
border-top: 0.4375rem solid var(--color-white);
}
.arrowDownDark {
border-top: 0.4375rem solid #2d2d2d;
}
.arrowUp {
margin: 0 auto;
border-left: 0.4375rem solid transparent;
border-right: 0.4375rem solid transparent;
}
.arrowUpLight {
border-bottom: 0.4375rem solid var(--color-white);
}
.arrowUpDark {
border-bottom: 0.4375rem solid #2d2d2d;
}
当然,这可以通过主题化有效地完成,但我已经阅读过它我不知道如何去做。
解决方案
您可以允许 CSS通过使用以下方式来完成应用主题的繁重工作CSS variables
:
background
为and创建两个变量color
- 比如说--bg
and--color
(请注意,您将在此处定义主题中更改的所有属性),定义一个
.wrapper.light
和一个wrapper.dark
规则,例如根据浅色或深色主题定义这些变量,现在主题将应用于
wrapper
使用:.wrapper { color: var(--color); background-color: var(--bg); }
请参阅下面的演示:
const App = ({theme}) => {
return (
<div className={'wrapper ' + theme}>
<h1>Hello {theme}!</h1>
<span className="arrow arrowLeft"/>
<span className="arrow arrowUp"/>
<span className="arrow arrowRight"/>
<span className="arrow arrowDown"/>
</div>
)
}
ReactDOM.render(<App theme="light"/>, document.getElementById('theme1'));
ReactDOM.render(<App theme="dark"/>, document.getElementById('theme2'));
.wrapper.light {
--bg: white;
--color: #262626;
}
.wrapper.dark {
--bg: #2d2d2d;
--color: #ffffff;
}
.wrapper {
color: var(--color);
background-color: var(--bg);
}
.arrow {
display: inline-block;
width: 0;
height: 0;
margin: 10px;
}
.arrowRight {
border-top: 0.4375rem solid transparent;
border-bottom: 0.4375rem solid transparent;
border-left: 0.4375rem solid var(--color);
}
.arrowLeft {
border-top: 0.4375rem solid transparent;
border-bottom: 0.4375rem solid transparent;
border-right: 0.4375rem solid var(--color);
}
.arrowDown {
border-left: 0.4375rem solid transparent;
border-right: 0.4375rem solid transparent;
border-top: 0.4375rem solid var(--color);
}
.arrowUp {
border-left: 0.4375rem solid transparent;
border-right: 0.4375rem solid transparent;
border-bottom: 0.4375rem solid var(--color);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="theme1"></div>
<div id="theme2"></div>
推荐阅读
- chatbot - Botium 核心 - 频繁测试失败并显示消息“AllInstitutions_3/Line 7: error sent to bot Error”
- php - 我的 sql 插入查询没有错误,但没有向数据库中插入任何内容
- react-native - ScrollView 中包裹的多个 FlatList
- scala - 将列表的 spark DF 列拆分为单独的列
- python - 根据 xy 坐标计算行和列,TypeError: 'float' object is not subscriptable
- spring-boot - 来自 Google Kubernetes Engine 的邮件
- spring-boot - @Value("${server.address}") 返回 null
- amazon-cloudformation - 我们可以在 cloudformation 模板中添加任何带有 !Ref 的字符串吗?
- ansible - 在ansible中如何禁用单个任务的弃用警告?
- python - 获得单行代码执行时间的最佳方法是什么?