[英]getting error while adding css to button in my react js app
I was styling a button in my react js website and got this error while writing the css for it, actually I was going to animate it after hovering the mouse.我在我的 React js 网站上设计了一个按钮,并在为它编写 css 时遇到了这个错误,实际上我打算在鼠标悬停后为它设置动画。 its showing the following errors
它显示以下错误
1.colon expected [11,9] 2.semi-colon expected [12,18] 3. { expected [13, 14] 4. at-rule or selector expected[15,5] 5. } expected [31,13] 6. identifier expected [34,19] 7. { expected [35,20] 8. at-rule or selector expected [36,9] 1.冒号预期 [11,9] 2.分号预期 [12,18] 3. { 预期 [13, 14] 4. 规则或选择器预期 [15,5] 5. } 预期 [31,13 ] 6. 标识符预期 [34,19] 7. { 预期 [35,20] 8. 规则或选择器预期 [36,9]
button{
background: black;
border: none;
padding: 10px 20px;
display: inline-block;
font-size: 1rem;
font-weight: 800;
width: 200;
cursor: pointer;
transform: skew(-21deg);
span{
display: inline-block;
transform: skew(21deg);
}
::before{
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 100%;
left: 100%;
background: #000;
opacity: 0;
z-index: -1;
transition: all 0.5s;
}
::hover{
color: #fff;
::before{
left: 0;
right:0;
opacity: 1;
}
}
}
Assuming that you're using standard stylesheet, you can't use nesting in styles. For example:假设您使用的是标准样式表,则不能在 styles 中使用嵌套。例如:
button {
span {
...
}
::hover {
...
}
}
Css shown in snippet above is not valid(or standard) css. You can either do something like this:上面代码段中显示的 Css 无效(或标准)css。您可以执行以下操作:
button {
...
}
button span {
...
}
button::hover {
...
}
or you can use scss
, which is a css preprocessor and allows you to use nesting and other cool features.或者您可以使用
scss
,这是一个 css 预处理器,允许您使用嵌套和其他很酷的功能。 For details or more ways to implement css in React, read this .有关在 React 中实现 css 的详细信息或更多方法,请阅读此。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.