我用react-semantic-ui创建了卡片,我想通过css类添加一些额外的样式。
一个例子是:
我添加了带有 box-shadow 属性的自定义“card”类,但未应用该样式。
HTML PART:
import './App.css';
{/* CLAIM CARDS SECTION */}
<Card className='card'>
<Card.Content>
<Card.Header style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
<h4>
Church Mutual Worker's Compensation Claim
<span style={{marginLeft: '130px'}}>Claim #1234567</span>
</h4>
</Card.Header>
</Card.Content>
</Card>
CSS 代码部分:App.css
.header-height {
height: 12rem;
}
.header-title-color {
color: black;
font-weight: bold;
}
.card {
box-shadow: 2px 2px 2px 2px grey;
width: 100%;
}
.red {
color: red;
}
有人有解决方案如何将自定义CSS类添加到React-semantic-ui组件吗?
谢谢
最佳答案
为您的 className 指定一个更具体的名称,例如 Claim_Card。之后,在您的 CSS 中,您需要通过将您的 className 添加到该组件的现有语义 CSS 来覆盖 Sematic 的默认 CSS。在你的情况下,它会像
.ui.card.claim_Card {
background: #455332; //for example
}
这将使您的 css 规则更加具体,并将覆盖默认的语义 css。无论如何,请在浏览器检查器中检查哪个 css 类应用于您想要设置样式的元素,并使用该 className(在本例中为 .ui.card),并在其上添加您的 className 定义和规则。
关于javascript - 为什么自定义 css 类不适用于 React-Semantic-UI 元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52345724/