**Hello everyone, I am currently attempting to incorporate CSS in React but am not seeing any changes on the app's home page. Additionally, I am interested in learning how to add pseudo selectors using MUI styled.**
This is the content of 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;