Question

来自globalstyle的组件

全局样式仅在此组件中可见，col-lg-2，col-md-4 - ＆gt; 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(.yourClass) { //your css }

Answer 2

只有<Header />出现在<App />的某个地方时才会加载这些样式。我假设情况确实如此，但请确保标题组件显示在<App />中。如果这不起作用，请尝试查看网络检查器的Network标签并重新加载页面 - 看看您的CSS是否被加载。

编辑：只是看看你的课程在代码中的位置不起作用。如果.test是全局样式文件中的类，则它不会显示在Header.css文件中。尝试删除＆＃34;样式＆＃34;如果test是test中的一个类，则只需给它一个flexboxgrid.min.css类。

Answer 3

CSS的导入是

import './Header.css'

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

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

Answer 4

你需要导入bootstrap到index.jsx，目前你只导入它，require（'。/ basestyle / flexboxgrid.min.css'）还不够，你的系统怎么知道有boostrap如果没有导入

组件看不到全局样式

4 个答案: