我正在使用CSS模块附带的(现在较旧的)react-boilerplate版本。它们的优点在于您可以创建变量并将其导入其他CSS文件中。
这是我的colors.css文件
:root {
/* Status colors */
--error: #842A2B;
--success: #657C59;
--pending: #666;
--warning: #7E6939;
}
当我导入该文件时,我只需要在.css文件的顶部使用:
@import 'components/App/colors.css';
我希望为我的网站选择两个主题,我希望能够使用Javascript动态更新这些变量。最好的方法是什么?
编辑:我希望有更新colors.css
文件的方法,而不必在从两个可能的css文件中提取的所有组件中进行条件导入...让我知道是否有&# 39;这样做的方法,如果有,我会改变接受的答案。谢谢所有回答的人!
答案 0 :(得分:12)
我只使用元素/ body
/上的默认颜色变量,然后将备用主题颜色放在另一个类中,并通过JS切换主题类。这是一个演示。
$("button").on("click", function() {
$("body").toggleClass("foo");
});
body {
--red: red;
--blue: blue;
--yellow: yellow;
background: #ccc;
text-align: center;
font-size: 5em;
}
.foo {
--red: #ce1126;
--blue: #68bfe5;
--yellow: #ffd100;
}
.red {
color: var(--red);
}
.blue {
color: var(--blue);
}
.yellow {
color: var(--yellow);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="red">RED</span> <span class="blue">BLUE</span> <span class="yellow">YELLOW</span>
<br>
<button>click me</button>
答案 1 :(得分:3)
这是你在找什么?
// get the inputs
const inputs = [].slice.call(document.querySelectorAll('.controls input'));
// listen for changes
inputs.forEach(input => input.addEventListener('change', handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));
function handleUpdate(e) {
// append 'px' to the end of spacing and blur variables
const suffix = (this.id === 'base' ? '' : 'px');
document.documentElement.style.setProperty(`--${this.id}`, this.value + suffix);
}
:root {
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
}
body {
text-align: center;
}
img {
padding: var(--spacing);
background: var(--base);
-webkit-filter: blur(var(--blur));
/* */
filter: blur(var(--blur));
}
.hl {
color: var(--base);
}
/*
misc styles, nothing to do with CSS variables
*/
body {
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
font-weight: 100;
font-size: 50px;
}
.controls {
margin-bottom: 50px;
}
a {
color: var(--base);
text-decoration: none;
}
input {
width:100px;
}
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
<label>Spacing:</label>
<input type="range" id="spacing" min="10" max="200" value="10">
<label>Blur:</label>
<input type="range" id="blur" min="0" max="25" value="10">
<label>Base Color</label>
<input type="color" id="base" value="#ffc600">
</div>
<img src="http://unsplash.it/800/500?image=899">
<p class="love"></p>
<p class="love">Chrome 49+, Firefox 31+</p>
答案 2 :(得分:3)
我会有两张纸并有条件地在两者之间切换:
colours.scss
:root {
/* Status colors */
--error: #842A2B;
--success: #657C59;
--pending: #666;
--warning: #7E6939;
}
otherColours.scss
:root {
/* Status colors */
--error: #FF0000;
--success: #00FF00;
--pending: #6666FF;
--warning: #FF00FF;
}
然后在您的反应代码中导入它们并按照您的意愿使用它们:
import styles from 'colours.scss';
import alternativeStyles from 'otherColours.scss';
...
{this.props.useNormalStyle ? styles.myClass : alternativeStyles.myClass}