介绍
react-styled-ui 是一个基于 React 和 Styled Components 的组件库，旨在提供一些常用的 UI 组件并保持易于扩展和风格定制。
安装
使用 npm 安装 react-styled-ui：
npm install react-styled-ui
或使用 yarn 安装：
yarn add react-styled-ui
使用
使用完整的组件
import { Button } from 'react-styled-ui';
function MyComponent() {
return (
<Button>Click me</Button>
);
}局部引入组件
-- -------------------- ---- -------
------ ------ ---- --------------------
------ - ------ - ---- ------------------
----- ------------ - ---------------
---------- -----
----------------- --------
------ -----
--
-------- ------------- -
------ -
------------------- -----------------
--
-组件列表
Button
Button 组件通过 styled-components 创建并附带对所有 HTML 属性的支持。
import { Button } from 'react-styled-ui';
function MyComponent() {
return (
<Button>Click me</Button>
);
}Input
Input 组件包含 input[type=text]、input[type=password] 和 textarea。
-- -------------------- ---- -------
------ - ----- - ---- ------------------
-------- ------------- -
------ -
--
------ ----------- ---------------------- --
------ --------------- ---------------------- --
------ ------------- -------- ------------------ ----- --
---
--
-Checkbox
Checkbox 组件进入了受控组件的领域，通过 checked 和 onChange 两个属性控制。
-- -------------------- ---- -------
------ - -------- - ---- ------------------
-------- ------------- -
----- --------- ----------- - ----------------
----- ------------ - -- -- -
---------------------
--
------ -
--------- ----------------- ------------------------- ----- -- --- ----- --- ---------------------
--
-Radio
Radio 组件进入了受控组件的领域，通过 checked 和 onChange 两个属性控制。
-- -------------------- ---- -------
------ - ----- - ---- ------------------
-------- ------------- -
----- --------- ----------- - ----------------
----- ------------ - -- -- -
---------------------
--
------ -
------ ----------------- -----------------------------------
------ ------------------ ----------------------------------
--
-Select
Select 组件通过 options 属性渲染 option item。
-- -------------------- ---- -------
------ - ------ - ---- ------------------
-------- ------------- -
----- ------- - -
- ------ ---- ------ ------- -- --
- ------ ---- ------ ------- -- --
- ------ ---- ------ ------- -- --
--
------ -
------- ----------------- --
--
-Textarea
Textarea 组件支持 placeholder 和 defaultValue 属性。
import { Textarea } from 'react-styled-ui';
function MyComponent() {
return (
<Textarea placeholder="Input text" defaultValue="This is some example text." />
);
}扩展组件
想要向组件添加样式或更改样式名称？可以使用 styled 方法来扩展组件的样式！
-- -------------------- ---- -------
------ ------ ---- --------------------
------ - ------ - ---- ------------------
----- ------------ - ---------------
---------- -----
----------------- --------
------ -----
--
-------- ------------- -
------ -
------------------- -----------------
--
-总结
react-styled-ui 是一个轻量、易于使用和扩展的 React UI 组件库。它提供了一些必要的 UI 组件以及一个简单的 API 用于扩展和风格定制。很多内容都可以从源代码中查看并理解，也可以通过阅读官方文档加深理解，推荐在项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671a730d0927023822600