TypeScript+React

相关文章

TypeScript+React入门
TypeScript+React入门-----引入css
React+TypeScript入门-----BrowserRouter
在这个项目里引入css文件是非常简单的，只需要一行代码就可以实现了。
首先创建相关文件夹，在src下创建了两个文件夹，components文件夹用来存放各个组件，css文件夹用来存放css文件。
[图片上传失败...(image-2f239-1695891568126)]

然后写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'                                    ]