無法在反應中添加css

Question

**嗨，我想在 react 中添加 css，但在應用程序主頁中沒有得到任何更改，我還需要知道如何使用 mui 樣式添加這個偽選擇器 **

這是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
  }

這是 home.js 文件：

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

並通過直接調用類名來使用它

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