javascript - 如何在 ReactJS 中使用 css 调整按钮的大小
问题描述
我想制作一个定义宽度的按钮,但是我有一个模板,其中定义了包含样式的按钮组件,所以当我尝试修改按钮的样式时,什么也没发生,这是我的代码
这是我在反应类中调用组件的时候
<Button
className={classes.buttonW}
component={Link}
color="success"
size="lg"
to="/album-carousel-page"
>
Galeria
</Button>
我修改css按钮时的类名
buttonW: {
width: "100px",
height: "30px"
}
这是模板原始按钮上方的代码(我认为非常复杂)
button: {
minHeight: "auto",
minWidth: "auto",
backgroundColor: grayColor,
color: "#FFFFFF",
boxShadow:
"0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12)",
border: "none",
borderRadius: "3px",
position: "relative",
padding: "12px 30px",
margin: ".3125rem 1px",
fontSize: "12px",
fontWeight: "400",
textTransform: "uppercase",
letterSpacing: "0",
willChange: "box-shadow, transform",
transition:
"box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
lineHeight: "1.42857143",
textAlign: "center",
whiteSpace: "nowrap",
verticalAlign: "middle",
touchAction: "manipulation",
cursor: "pointer",
"&:hover,&:focus": {
color: "#FFFFFF",
backgroundColor: grayColor,
boxShadow:
"0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2)"
},
"& .fab,& .fas,& .far,& .fal,& .material-icons": {
position: "relative",
display: "inline-block",
top: "0",
fontSize: "1.1rem",
marginRight: "4px",
verticalAlign: "middle"
},
"& svg": {
position: "relative",
display: "inline-block",
top: "0",
width: "18px",
height: "18px",
marginRight: "4px",
verticalAlign: "middle"
},
"&$justIcon": {
"& .fab,& .fas,& .far,& .fal,& .material-icons": {
marginRight: "0px",
position: "absolute",
width: "100%",
transform: "none",
left: "0px",
top: "0px",
height: "100%",
lineHeight: "41px",
fontSize: "20px"
}
}
},
fullWidth: {
width: "100%"
},
谢谢你帮助我 :) 我讨厌在风格上浪费太多时间 :'(
解决方案
确保正确导入 CSS 文件...
如果是这样,请将您的按钮更改为类似的内容。
<Button
className="buttonW"
component={Link}
color="success"
size="lg"
to="/album-carousel-page"
>
Galeria
</Button>
然后在您的 CSS 中添加句点“。”。在类名之前
.buttonW {
width: "100px",
height: "30px"}
..这应该适合你..
如果一切都失败了,您可以使用如下所示的内联样式。
<Button
className="buttonW"
style={{height: '30px', width : '100px'}}
component={Link}
color="success"
size="lg"
to="/album-carousel-page"
>
祝你好运!
推荐阅读
- r - 无法将一些 unicode 字符写入文件
- java - adb devices => 没有权限(plugdev 组中的用户;您的 udev 规则错了吗?)
- android - Xamarin Android 动画更改位置
- java - 使用服务作为“工厂”返回不同的 Bean 实现
- jenkins - qTest | Jenkinsfile 流水线集成
- android - 非英特尔 AVD 仿真器
- html - 在手机Bootstrap 4上查看时图像跳出div
- javascript - Angular 2将变量从一个组件传递到另一个组件
- node.js - 每次nodejs中的另一个请求失败时重试一个请求
- linux - 配置 SSL ACL 时 kafka 消费者无法连接到服务器:{test-topic=LEADER_NOT_AVAILABLE}