安徽金路建设集团有限公司网站,平面设计班培训入门,网站上做推广方案,wordpress 生成 客户端文章目录 一、普通方式使用CSS1.1 元素内联 style1.2 引入 CSS 文件1.3 类名插件 -- Classnames1.4 注意事项 二、CSS Module2.1 普通 CSS 的问题2.2 CSS Module 的特点2.3 简单使用 三、使用 sass3.1 sass 简介3.2 使用 四、CSS-in-JS4.1 CSS-in-JS 简介4.2 CSS-in-JS 常用工具… 文章目录 一、普通方式使用CSS1.1 元素内联 style1.2 引入 CSS 文件1.3 类名插件 -- Classnames1.4 注意事项 二、CSS Module2.1 普通 CSS 的问题2.2 CSS Module 的特点2.3 简单使用 三、使用 sass3.1 sass 简介3.2 使用 四、CSS-in-JS4.1 CSS-in-JS 简介4.2 CSS-in-JS 常用工具之 Styled-component4.3 CSS-in-Js 常用工具之 Styled-js 和 Emot 五、总结 一、普通方式使用CSS
1.1 元素内联 style
和 HTML 元素的 style 类似但必须是 JS 对象的写法不能是字符串样式名要驼峰式写法例如fontSize
import React, { FC } from react
import ./QuestionCard.csstype PropsType {id: stringisPublished: boolean
}
const QuestionCard: FCPropsType props {const { id, isPublished } propsreturn (div key{id} classNamelist-item{isPublished ? (span style{{ color: green, fontSize: 20px }}已发布/span) : (span未发布/span)}/div)
}
export default QuestionCard1.2 引入 CSS 文件
使用 CSS 文件JSX 使用 className可使用 clsx 或 classnames 做条件判断
定义 引入并使用
1.3 类名插件 – Classnames classname地址https://www.npmjs.com/package/classnames 安装
# via npm
npm install classnames# via Bower
bower install classnames# or Yarn (note that it will automatically save the package to your dependencies in package.json)
yarn add classnames使用
var classNames require(classnames);
classNames(foo, bar); // foo bar1.4 注意事项
注尽量不要用内联 style
内联style 代码多性能差、扩展性不好外链 CSS 文件可复用代码可单纯缓存文件PS: 这和 React 无关学HMTL CSS 时就应该知道 二、CSS Module
2.1 普通 CSS 的问题
React 使用组件化开发不适合多个组件就需要多个 CSS 文件多个 CSS 文件就很容易造成 className 重复产生覆盖。不好管理CSS Modlule 就是解决方案之一
2.2 CSS Module 的特点
每个 CSS 文件都当做单独的模块命名格式 xxx.module.css为每个 className 增加后缀名不让它们重复Creat-React-App 原生支持 CSS Module
2.3 简单使用
2.3.1 定义样式 2.3.2 使用 三、使用 sass
3.1 sass 简介
CSS 语法比较原始比如说不能嵌套现代开发一般使用 less sass 等预处理语言create-react-app 原生支持 Sass Module , 后缀改成 .scss 即可
3.2 使用
定义时文件名用 .scss 后缀 使用示例 四、CSS-in-JS
4.1 CSS-in-JS 简介
是一种解决方案而非工具名称有好几个工具在 JS 中 写 CSS带来极大的灵活性它和内联 style 完全不一样也不会有内联 style 的问题
4.2 CSS-in-JS 常用工具之 Styled-component 官网https://styled-components.com/ 安装
npm install styled-components --save使用
import React, { FC } from react
import styled, { css } from styled-componentstype ButtonPropsType {primary?: boolean
}
const Button styled.buttonbackground: transparent;border-radius: 3px;border: 2px solid #bf4f74;color: #bf4f74;margin: 0 1em;padding: 0.25em 1em;${(props: ButtonPropsType) props.primary cssbackground: #bf4f74;color: white;}const Container styled.divtext-align: center;
const Demo: FC () {return (divpstyleComponentsDemo/pContainerButtonNormal Button/ButtonButton primaryPrimary Button/Button/Container/div/)
}
export default Demo实现效果
4.3 CSS-in-Js 常用工具之 Styled-js 和 Emot
关于 Styled-js 和 Emotion
在 Typescript 环境下需要扩展 JSX 属性会带来一些麻烦优点用 JS 写有逻辑有变量非常灵活缺点JSX 和样式代码混在一起代码较多增加了编译成本试用场景需要灵活变换 CSS 样式 五、总结
综上具体使用何种 CSS 实现方法需要根据项目而定。就目前我接触的项目可能会更倾向使用 CSS- Module
第一使用简单学习成本低第二性能更好CSS-in-Js 会增加编译时间第三我暂时接触的项目不需要灵活变换样式
