Not able to add css in react - html

Question

**Hii all I am trying to add css in react but not getting any changes in app home page and I also need wants to know how to add this pseudo selector using mui styled **
This is the css file:
lines {
display: 'flex';
flex-direction: row;
}
lines:before, lines:after{
content: "";
flex: 1 1;
border-bottom: 1px solid;
margin: auto;
}
lines:before {
margin-right: 10px
}
lines:after {
margin-left: 10px
}
And this is the home.js file :
import { styled } from '#mui/system';
import styles from './Style.css';
const MyComponent = styled('div')({
backgroundImage : "url('https://images.pexels.com/photos/841130/pexels-photo-841130.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')",
height:'30vh',**strong text**
backgroundPosition: "center",
marginTop:'-80px',
fontSize:'50px',
backgroundSize: 'cover',
marginRight : '-10px',
marginLeft : '-10px',
backgroundRepeat: 'no-repeat',
textAlign : 'center',
padding: 200,
top: 200,
});
const HomeComp = () => {
return (
<>
<MyComponent> </MyComponent>
<h4 className={styles.lines}> Home Page</h4>
</>
)
}
export default HomeComp;

Answer 1

Try importing your CSS this way
import './Style.css';
and use it by calling the class name directly
<h4 className="lines"> Home Page</h4>

Answer 2

Your imports are correct, but coming to CSS, as they are classes, you have to add a . in front of them
.lines {
display: 'flex';
flex-direction: row;
}
.lines::before,
.lines::after {
content: "";
flex: 1 1;
border-bottom: 1px solid;
margin: auto;
}
.lines::before {
margin-right: 10px
}
.lines::after {
margin-left: 10px
}