reactjs - 是否可以使用 css 模块使用具有不同 CSS 的相同 React 组件?
问题描述
我发现 React CSS 模块很有用,但是当我尝试通过稍微修改的 css 重用相同的组件时遇到问题,我卡住了。例如,我创建了霓虹发光按钮,但现在只需要更改按钮的宽度和 css 中的一些额外的小更改。我看到的唯一选择是没有 css 的组件,并且对于每种不同的情况都需要重写整个 css。有没有更聪明的方法?
import React from "react";
import styles from "./index.module.css";
import { Link } from "react-router-dom";
const GlowingButton = ({ title, path }) => {
return (
<div className={styles.buttonWrapper}>
<Link className={styles.button} to={path}>
<button className={styles["glow-on-hover"]}>{title}</button>
</Link>
</div>
);
};
export default GlowingButton;
这里是 index.module.css
.buttonWrapper {
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
font-family: "consolas";
}
.button {
margin: 0;
padding: 0;
width: 80%;
height: 8vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #100f;
text-decoration: none;
}
.glow-on-hover {
width: 400px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
@keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
解决方案
推荐阅读
- swift - swift - 快速显示上下文菜单时如何自定义预览
- excel - Excel根据单元格VBA自动更改工作表名称
- javascript - 使用 react.js 加载数组
- python - 当数据集包含超过 50000 个缺失值时,如何使用 pandas 在数据分析中处理缺失的分类数据?
- regex - 无法找出以下的正则表达式
- python - 在 AWS Lambda (Python) 中将文件从 multipart/form-data 上传到 S3
- python - 加密整行文本
- arrays - 持有一个排序数组 - 反向排序的输入案例
- azure - 从 csv 文件中删除用户的 Azure 许可证
- json - 如何从 Json webtemplate 渲染 HTML