styled-study:创建类似于样式化组件工作原理的组件的简单项目。 旨在更多地了解如何使用模板文字和标记的模板文字

时间:2024-06-16 14:00:58
【文件属性】:

文件名称:styled-study:创建类似于样式化组件工作原理的组件的简单项目。 旨在更多地了解如何使用模板文字和标记的模板文字

文件大小:497KB

文件格式:ZIP

更新时间:2024-06-16 14:00:58

JavaScript

研究式 这个项目的目的是要更多地了解Tagged Template Literals 。 我尝试使用此ES6功能模拟样式化组件的工作方式。 对于该/ styled / index,导出到目前为止仅处理div和p标签的样式化对象。 它的使用与使用样式化组件中的样式进行样式化的方式相同,但是它仅处理简单的css属性。 用 有两个样式化的

tags ,显示了如何使用样式化的对象Pipa和Pipo组件。 const Pipa = styled . p ` "borderRadius": "4rem", "padding": "1rem", "backgroundColor": ${ ( props : PipaProps ) => props . bgColor } , "color": ${ ( props : PipaProps ) => props


【文件预览】:
styled-study-main
----public()
--------manifest.json(492B)
--------index.html(2KB)
--------robots.txt(67B)
--------favicon.ico(4KB)
--------logo512.png(9KB)
--------logo192.png(5KB)
----yarn.lock(468KB)
----src()
--------logo.svg(3KB)
--------index.css(366B)
--------components()
--------styled()
--------App.js(589B)
--------reportWebVitals.js(362B)
--------App.test.js(246B)
--------setupTests.js(241B)
--------App.css(564B)
--------index.js(500B)
--------react-app-env.d.ts(40B)
----tsconfig.json(535B)
----README.md(1KB)
----.gitignore(310B)
----package-lock.json(1.32MB)
----package.json(902B)

网友评论