最近用webpack5 + typescript + React从头搭框架写项目。顺便深入学习和巩固ts, react相关，webpack原理这些知识。
之前用vue比较多，样式一般搭配Less, Stylus等CSS Modules. React大家推荐styled-components的比较多，所以去官网学习了解了下。这种css in js的写法确认挺符合React的理念。抱着学习的态度，框架里面打算选择styled-components。
当然，坚持不断的学习才是最重要的。
接下来，记录下styled-components的基本用法，以及webpack如何处理html里的图片。
Webpack 处理html里的图片
我们有个index.html模板文件。代码如下
<html lang="en"><head> <meta charset="UTF-8"> <title>workBox-consoletitle> <link rel="shortcut icon" href="./public/images/icon.svg"/>head><body> <div id="root"> div> <img src="./public/images/icon.svg"/>body>html>地址栏用<link rel="shortcut icon" href="./public/images/icon.svg"/>定义了一个图片。 body标签里用<img src="./public/images/icon.svg"/>也使用了这个图片，webpack如果不对图片处理进行配置的话，我们一般会因为路径的问题根本访问不到图片。即使路径写对了，webpack也不会对图片进行处理，比如hash编码, 压缩等等。
webpack处理图片我们选择file-loader插件，rules里面加入下规则
{ test: /\.(png|jpe?g|gif|svg)$/i, loader: 'file-loader', options: { outputPath: 'images', }, },这样webpack会打包图片放在images文件下。
然而这样配置，我们发现index.html里面的那种写法还是加载不出图片，why?因为wepack只会处理当成模块使用的图片。比如我们改成require去引用就可以，但是这种直接像普通的html标签引用的话，需要另一个插件html-loader. rules里面再加上一个配置
{ test: /\.html$/i, loader: 'html-loader', options: { attributes: { list: [ { tag: 'link', attribute: 'href', type: 'src', }, { tag: 'img', attribute: 'src', type: 'src', }, ], }, }, },好了，这时候link和img使用的图片都可以加载出来，并且webpack正常打包图片。
Styped-components
yarn add styled-components @types/styled-components 后，我们开始简单的使用styled-components写一个样式组件，测试看效果新建了一个HelloWorld.tsx文件
import styled from 'styled-components';import { Component, ReactNode } from 'react';import * as React from 'react';const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred;`;const Wrapper = styled.section` padding: 4em; background: papayawhip;`;export default class HelloWorld extends Component { constructor(props) { super(props) } render(): ReactNode { return ( <Wrapper> <Title> Hello World! Title> Wrapper> ); }}常规使用
styled.h1 其实就是一个函数，它会返回一个React Component. styled components 会为这个 React Component 添加一个 class ，该 class 的值为一个随机字符串. 传给 styled.h1 的模板字符串参数的值实际上是 CSS 语法，这些 CSS 会附加到该 React Component 的 class 中，从而为 React Component 添加样式.
// Create a Title component that'll render an tag with some styles
const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred;`;// Create a Wrapper component that'll render a tag with some stylesconst Wrapper = styled.section` padding: 4em; background: papayawhip;`;// Use Title and Wrapper like any other React component – except they're styled!render( <Wrapper> <Title> Hello World! Title> Wrapper>);
使用props
这个和react组件很相似
const Button = styled.button` background: ${props => props.primary ? "palevioletred" : "white"}; color: ${props => props.primary ? "white" : "palevioletred"}; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px;`;render( <div> <Button>NormalButton> <Button primary>PrimaryButton> div>);组件样式继承 styled(), 把需要继承的样式组件类传入括号
const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px;`;const TomatoButton = styled(Button)` color: tomato; border-color: tomato;`;render( <div> <Button>Normal ButtonButton> <TomatoButton>Tomato ButtonTomatoButton> div>);修改组件内部的标签 as
render(){ return ( as= ) } Header组件内部渲染的时候就是用的p标签当然，我们需要按照官网 https://styled-components.com/走一遍。然后用于自己的项目中实践
go on study
1159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
