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

2019年9月4日 149次阅读 来源: 小王子

相关文章

TypeScript+React入门
TypeScript+React入门—–引入css
React+TypeScript入门—–BrowserRouter
在这个项目里引入css文件是非常简单的，只需要一行代码就可以实现了。
首先创建相关文件夹，在src下创建了两个文件夹，components文件夹用来存放各个组件，css文件夹用来存放css文件。
《TypeScript+React入门-----引入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'                    
                ]
    原文作者：小王子
    原文地址: https://segmentfault.com/a/1190000017404282
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞