如何將CSS樣式應用於自定義React組件

Question

我使用“ npx create-react-app my-app”創建了一個演示react應用。 當我嘗試將樣式應用於React組件時，什么都沒有發生，但是當我將其應用於諸如<div或<p>的常規HTML標簽時，它就可以工作。 我不為什么。

我也嘗試在CSS文件中添加:local ，例如:local(.taken-frame)

// index.js =================        
import './style.css';


ReactDOM.render(
  <TakenFrame className="taken-frame"/>,
  document.getElementById('root')
);


// style.css ===============
.taken-frame{
  color: blue;
}

Answer 1

CSS樣式應用於react中的JSX元素，但不應用於組件

應用CSS樣式的方法錯誤，但是className仍然是組件的有效支持。 您可以使用this.props.className進行訪問，並以className的形式傳遞給div，就像我在正確的示例中提到的那樣

<TakenFrame className="taken-frame" />

應用CSS樣式的正確方法

 class TakenFrame extends React.Component {
       render(){
            return(
                <div className="taken-frame">

                </div>
                 //OR
               <div className={this.props.className}>

                </div>
            )
       }
 }

Answer 2

我使用以下樣式：

import styles from 'yourstyles.css'

...

 class TakenFrame extends React.Component {
       render(){
            return(
                <div className={styles.classNameDeclaredInCssFile}>
                </div>
            )
       }
 }

yourstyles.css文件應類似於：

.classNameDeclaredInCssFile{
//... your styles here
}

在您的情況下，您只是將一個名為“ className”的屬性傳遞給您的組件，而沒有使用它。 在組件中，如果您執行了以下操作：

 class TakenFrame extends React.Component {
       render(){
            return(
                <div className={this.props.className}>
                </div>
            )
       }
 }

我期望它會工作，但是我更喜歡將樣式分配給每個組件，當我在組件層次結構中大量傳遞樣式時，它為開發人員增加了我的困惑。 我希望這有幫助。

Answer 3

您也可以使用樣式化的組件。 請參考https://glamorous.rocks/basics