TypeScript+React入门-----引入css

相关文章

TypeScript+React入门
TypeScript+React入门-----引入css
React+TypeScript入门-----BrowserRouter
在这个项目里引入css文件是非常简单的，只需要一行代码就可以实现了。
首先创建相关文件夹，在src下创建了两个文件夹，components文件夹用来存放各个组件，css文件夹用来存放css文件。

然后写css相关代码，和传统的写法没有什么不同，在style.css内写你喜欢的样式就可以了，示例如下

.red-font{
    color: #f00;
    font-size:20px;
}

接着在components的tsx文件引入css，并导出这个组件

import React from 'react';
import '../css/style.css'
export default class CssDemo extends React.Component{
    render(){
        return <div className="red-font">
            red font
        </div>
    }
}

最后一步，在你的入口文件引入CssDemo渲染即可，是不是非常简单

import  React from 'react';
import  ReactDOM from 'react-dom';
import CssDemo from './components/cssDemo';

const render = () => {
    ReactDOM.render(               
        <CssDemo/>,
        document.querySelector('#app')
    )
}
render();

更新一下，补上webpack配置

test: /\.css$/,
                use:[
                    'style-loader',
                    'css-loader'                    
                ]