Not able to add css in react-CodePudding

**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;

CodePudding user response：

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
}

CodePudding user response：

Try importing your CSS this way

import './Style.css';

and use it by calling the class name directly

<h4 className={lines}> Home Page</h4>