裝入應用程序做出反應有些CSS不適用於

每個組件都有這樣的目錄結構：

MyComponent/ 
-- MyComponent.css 
-- MyComponent.js 
-- package.json

，並在MyComponent.js文件，我在做一個原始import './MyComponent.css'

比方說，我的CSS包含這樣的事情：

body { background-color: orange; } 
.card { background-color: purple; }

，並在我的組件渲染功能渲染一張牌：

render() { 
    return (
    <div className="card">Hello World</div> 
); 
}

頁的身體會變爲橙色，但卡不會變成紫色。

這是爲什麼CSS沒有被充分應用到所生成的HTML？

2017-04-13 Kristian

也許在'.card'規則中加上'！important'？ – Li357

我想，它甚至不顯示爲看到了'.card'的CSS的。 – Kristian

嗯。你有風格加載器和css加載器安裝並正確應用到webpack？我會這樣想，因爲其他的CSS規則已經被應用，但是請確認。也看看開發工具。 – Li357

根據React Static Boilerplate網站，他們使用CSS模塊 - 這可以解釋爲什麼body標記被尊重，但類選擇器沒有。

嘗試導入樣式表像這樣：

import styles from './MyComponent.css';

的用它在你的組件，如下所示：

<div className={styles.card}>something!</div>

2017-04-13 19:33:37 Toby

我曾與CSS的問題不被應用，但它不是模塊，它最終成爲應用mult的語法iple課程。下面的語法解決了這個問題

<div className={[styles['col-sm-16'], styles['col-md-10'], styles['col-lg-8']].join(' ')}> some content </div>

2017-11-30 15:22:53 user1169692

回答