组件没有看到全局样式。

Question

来自全局样式的组件

全局样式仅在此组件中可见，包括-md lg-2、col md-4 ->全局样式。

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(.yourClass) { //your css }

Answer 2

只有当<Header />出现在<App />中的某个地方时，才会加载这些样式。我假设是这样的，但否则要确保header组件出现在<App />中。如果这不起作用，试着看看你的网页检查器的Network标签，然后重新加载页面--看看你的CSS是否被加载了。

编辑:只是看看你的类在代码中哪里不起作用。如果.test是全局样式文件中的一个类，它就不会出现在Header.css文件中。尝试移除“样式”，如果test是flexboxgrid.min.css中的一个类，只需给它一个类flexboxgrid.min.css。

Answer 3

用于CSS的导入是

import './Header.css'

引用组件中的css类，然后使用：

 <div className="col-lg-2 col-md-4 test" >