I've successfully converted an HTML file into a component designed to resemble a 7-segment LED display. I have imported the necessary CSS styles from the index.css file, but I am unsure how to properly apply these styles within the component.
My attempts to inject the styles through specific values have not yielded the desired results, as the CSS syntax seems to be causing compatibility issues with my component. I am seeking guidance on whether there is a method to pass these styles without needing to make modifications to the original CSS file.
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
Any recommendations on injecting/styling elements using this index.css:
.clear {
clear: both;
}
...
#clock-container {
margin-top: -110px;
...
}