后端开发教程 - Java、Spring Boot 实战 - msg200.com
黑暗模式：使用 styled-components 的条件样式
入门
让我们编码
styled-components 允许你编写实际的 CSS 代码来设置组件的样式。它还移除了组件和样式之间的映射——使用组件作为底层样式结构变得非常简单。styled -components的官方文档如下：
入门
对于先决条件部分，您需要在您的机器上安装Node 。
接下来让我们创建一个 React 应用程序并安装 styled-components，然后启动该应用程序。
npx create-react-app react-app
cd react-app
npm install styled-components
npm start
让我们编码
我们需要从“styled-components”导入 styled，并创建一个用于渲染 div 标签的 Container 组件。该 Container 组件将充当包装器组件。
import styled from "styled-components";
const Container = styled.div`
//CSS to be added here
`
要添加在暗模式之间切换的按钮，我们将使用通过复选框创建的切换按钮。
<Container>
<div className="contain">
<h5>Dark Mode</h5>
<label class="switch">
<input type="checkbox" onChange={(e) => setDark(!dark)} />
<span class="slider round"></span>
</label>
</div>
</Container>
切换按钮的 CSS：
.contain {
margin: auto;
position: relative;
top: 40%;
}
h5 {
margin: 0;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 2px;
bottom: 1px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: white;
}
input:focus + .slider {
box-shadow: 0 0 1px white;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(12px);
background-color: black;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
切换按钮看起来是这样的，
现在让我们添加功能，我们将使用 useState Hook，
const [dark, setDark] = useState(false);
默认情况下，切换应该关闭，切换时暗值应该为真，因此让我们在输入标签上添加 onChange 属性，
<input type="checkbox" onChange={(e) => setDark(!dark)} />
接下来我们需要将 dark 值传递给 Container 组件，以便我们可以相应地更改背景颜色
<Container dark={dark}>
传递暗值后，我们可以有条件地改变背景
const Container = styled.div`
background: ${({ dark }) => (dark ? "black" : "white")}; //Conditional styling the background color
height: 100vh;
min-height: fit-content;
.switch {
position: relative;
display: inline-block;
width: 32px;
height: 16px;
border-radius: 50%;
border: 3px solid black;
}
h5 {
margin: 0;
color: ${({ dark }) => (!dark ? "black" : "white")}; // To change the color of the text opposite to the background color
}
//Remaining CSS remains the same
完整代码：
import React, { useState } from "react";
import styled from "styled-components";
const Container = styled.div`
background: ${({ dark }) => (dark ? "black" : "white")};
height: 100vh;
min-height: fit-content;
.switch {
position: relative;
display: inline-block;
width: 32px;
height: 16px;
border-radius: 50%;
border: 3px solid black;
}
.contain {
margin: auto;
position: relative;
top: 40%;
}
h5 {
margin: 0;
color: ${({ dark }) => (!dark ? "black" : "white")};
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: black;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 2px;
bottom: 1px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}
input:checked + .slider {
background-color: white;
}
input:focus + .slider {
box-shadow: 0 0 1px white;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(12px);
background-color: black;
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
`;
function App() {
const [dark, setDark] = useState(false);
return (
<Container dark={dark}>
<div className="contain">
<h5>Dark Mode</h5>
<label class="switch">
<input type="checkbox" onChange={(e) => setDark(!dark)} />
<span class="slider round"></span>
</label>
</div>
</Container>
);
}
export default App;
这是我在 Dev.to 上的第一篇博客。
希望它对你有帮助，并且易于实现。
期待大家的反馈，也欢迎查看我的 Github thenickrj。