我的react应用程序中有一个小的CSS问题,但是我找不到解决它的方法。
无论我设置的颜色(十六进制,RGB或RGBA),div的背景始终为白色。即使边界半径不起作用,但宽度/高度和边距也可以正常工作。
这是我的代码:
card.js
import React from "react";
import "../styles/card.css";
export default class Cards extends React.Component {
render() {
return (
<div className="card">
<img src="../images/cards/BR-Customcard-back.png" alt="card" />
<span>Card Name</span>
</div>
);
}
}
card.css:
.card {
background-color: rgba(107, 66, 30, 0.4);
width: 282px;
height: 417px;
margin: 10px auto 10px auto;
text-align: center;
border-radius: 20px;
}
父元素,cards.js:
import React from "react";
import "../styles/cards.css";
import Card from "./Card";
export default class Cards extends React.Component {
render() {
return (
<div className="cards" style={{ padding: "10px" }}>
<Card />
<Card />
<Card />
</div>
);
}
}
cards.css
.cards {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
渲染的CSS:
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
.card {
background-color: rgba(107, 66, 30, 0.4);
width: 282px;
height: 417px;
margin: 10px auto 10px auto;
text-align: center;
border-radius: 20px;
}
渲染标记:
<div class="cards">
<div class="card">
<img src="../images/cards/BR-Customcard-back.png" alt="card">
<span>Card Name</span>
</div>
....
</div>
您在组件上设置的类名与您在CSS文件中定义的类名不同;应该是:
className="card"
将className
更改为class
。属性错误