[英]How can I resize a button with css in ReactJS
I want to make a button with a define width, but I have a template with the button component defined including styles, so when I try to modify the style of the button, it happened nothing, here is my code我想制作一个定义宽度的按钮,但我有一个定义了按钮组件的模板,包括样式,所以当我尝试修改按钮的样式时,什么也没发生,这是我的代码
Here is when I call the component in the react class这是我在反应类中调用组件的时候
<Button
className={classes.buttonW}
component={Link}
color="success"
size="lg"
to="/album-carousel-page"
>
Galeria
</Button>
The classname when I modify the css button修改css按钮时的类名
buttonW: {
width: "100px",
height: "30px"
}
And here is the code above the template original button (Very complex for my opinion)这是模板原始按钮上方的代码(我认为非常复杂)
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%"
},
Thank you for helping me :) I hate to lose too much time with styles :'(谢谢你帮助我 :) 我讨厌在样式上浪费太多时间 :'(
Make sure you are importing your CSS file correctly...确保正确导入 CSS 文件...
If so, change your button to something like this.如果是这样,请将您的按钮更改为这样的内容。
<Button
className="buttonW"
component={Link}
color="success"
size="lg"
to="/album-carousel-page"
>
Galeria
</Button>
Then in your CSS, prefix a period "."然后在你的 CSS 中,加上句号“.”。 before the class name
在类名之前
.buttonW {
width: "100px",
height: "30px"}
.. this should work for you.. ..这应该适合你..
If all fails, you can then use inline styling as shown below.如果一切都失败了,您可以使用内联样式,如下所示。
<Button
className="buttonW"
style={{height: '30px', width : '100px'}}
component={Link}
color="success"
size="lg"
to="/album-carousel-page"
>
Good luck!祝你好运!
May be you can try this way.也许你可以试试这种方式。 Make a .css file and put the following code there
制作一个 .css 文件并将以下代码放在那里
.buttonW {
width: "100px" !important;
height: "30px" !important;
}
Import that css file top of your component导入组件顶部的 css 文件
and assign it并分配它
className="buttonW"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.