无法在反应中添加 css

Question

**你好，我正在尝试在 React 中添加 css，但在应用程序主页中没有得到任何更改，我还需要想知道如何使用 mui 样式添加此伪选择器 **

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

尝试以这种方式导入您的CSS

import './Style.css';

直接调用class名称即可使用

<h4 className="lines"> Home Page</h4>

Answer 2

您的导入是正确的，但是进入 CSS，因为它们是类，您必须在它们前面添加一个 .

.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
}

无法在反应中添加 css

Not able to add css in react

html

css

node.js

reactjs

mern