javascript - 组件看不到全局样式

Question

来自全局样式的组件

全局样式仅在此组件中可见，col-lg-2,col-md-4 -> globalstyle

import React from 'react'
import ReactDOM from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { BrowserRouter } from 'react-router-dom'
import App from './containers/App'
import './basestyle/flexboxgrid.min.css' //Global style

ReactDOM.render(
  <AppContainer>
     <BrowserRouter>
       <App/>
     </BrowserRouter>
  </AppContainer>,
  document.getElementById('root')
);

<小时/>

应该获取样式的组件

import React from 'react'
import { Link } from 'react-router-dom'
import styles from './Header.css'
import icon from './icon.png'


const Header = () => (
  <div className="row">
    <div className={`col-lg-2 col-md-4 ${styles.test}`} > //Here is not available
       <Link to="/категории">
         <div className={styles.logoBox}>
           <img src={icon} alt="logo"/>
             <h1>Белый кот</h1>
         </div>
       </Link>
    </div>
  </div>
);

export default Header;

Webpack.config https://github.com/minaev-git/TestQuestion

Answer 1

尝试将 global 添加到您的类名中。例如

:global(.yourClass) {
//你的CSS
}