我已经将一个 html 文件转换为一个 7 段 LED 组件,我从 index.css 导入了 css 文件,但我不知道如何从 index.css 注入(inject)样式
我尝试通过值的方式注入(inject)样式,但是css语法发生变化,组件无法识别 我想知道是否有一种方法可以在不修改css文件的情况下传递样式
import React from 'react'
import styles from './index.css'
const Display = () =>{
return(
<div id="vertical-center">
<div id="clock-container">
<div id="display-1" className="display-container display-size-12 display-no-0">
<div className="segment-x segment-a"><span className="segment-border"></span></div>
<div className="segment-y segment-b"><span className="segment-border"></span></div>
<div className="segment-y segment-c"><span className="segment-border"></span></div>
<div className="segment-x segment-d"><span className="segment-border"></span></div>
<div className="segment-y segment-e"><span className="segment-border"></span></div>
<div className="segment-y segment-f"><span className="segment-border"></span></div>
<div className="segment-x segment-g"><span className="segment-border"></span></div>
</div>
</div>
</div>
)
}
export default Display
我如何从中注入(inject)样式 索引.css:
.clear {
clear: both;
}
.display-container.display-size-12 {
margin-bottom: 24px;
}
.display-container {
position: relative;
margin-right: 24px;
float: left;
}
.display-container div.segment-x,
.display-container div.segment-y {
position: absolute;
}
.display-container span.segment-border {
display: block;
position: absolute;
}
.display-container.display-size-12 {
width: 122px;
height: 220px;
}
.display-container.display-size-12 .segment-x {
width: 72px;
left: 13px;
border-bottom: 12px solid #000;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
.display-container.display-size-12 .segment-x .segment-border {
top: 12px;
left: -12px;
right: -12px;
border-top: 12px solid #000;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
}
.display-container.display-size-12 .segment-y {
height: 72px;
width: 0;
border-right: 12px solid #000;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.display-container.display-size-12 .segment-y .segment-border {
position: relative;
left: 12px;
height: 72px;
margin-top: -12px;
border-left: 12px solid #000;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.display-container.display-size-12 .segment-a {
top: 0;
}
.display-container.display-size-12 .segment-b {
top: 13px;
left: 98px;
}
.display-container.display-size-12 .segment-c {
top: 111px;
left: 98px;
}
.display-container.display-size-12 .segment-d {
top: 196px;
}
.display-container.display-size-12 .segment-e {
top: 111px;
left: 0px;
}
.display-container.display-size-12 .segment-f {
top: 13px;
left: 0px;
}
.display-container.display-size-12 .segment-g {
top: 98px;
}
.display-no-0 .segment-g {
/*display: none;*/
opacity: 0.1;
}
#vertical-center {
position: absolute;
height: 0;
top: 50%;
left: 50%
}
#clock-container {
margin-top: -110px;
margin-left: -462px;
width: 924px;
height: 220px;
}
最佳答案
您应该使用带有花括号的style
而不是className
...
关于html - 如何在 Component React 中注入(inject) CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45467036/