npm 包 rms-meteor-styles 使用教程

简介

rms-meteor-styles 是一个基于 React 的 CSS 样式库，它包含了一系列在企业应用中常用的样式，且提供了一些有用的组件。

值得一提的是，本库是从 RocketMiles 所使用的样式库中剥离出来的，并随着时间的推移得到了不断扩充和优化。

安装

你需要使用 npm 进行安装：

npm install --save rms-meteor-styles

使用

引入样式

在你的 SCSS/CSS 文件中，你可以使用以下的方式来引入样式：

@import "~rms-meteor-styles/css/reset";
@import "~rms-meteor-styles/css/typography";
@import "~rms-meteor-styles/css/colors";
@import "~rms-meteor-styles/css/buttons";

如果你使用的是 React，在你的根组件中引入即可：

import React from 'react';
import ReactDOM from 'react-dom';
import '~rms-meteor-styles/css/reset';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

使用组件

rms-meteor-styles 还提供了一些有用的组件，在项目中使用这些组件可以更加方便地快速搭建企业级应用。

Button

Button 组件是一个非常常用的组件，它可以用来创建交互式的按钮。

import React from 'react';
import { Button } from 'rms-meteor-styles';

export default () => (
  <Button>
    Submit
  </Button>
);

你可以自定义 Button 的样式和大小，或者选择其中一个预设的类型：

export default () => (
  <>
    <Button type="primary" size="large">Primary Large Button</Button>
    <br />
    <Button type="danger" size="small">Danger Small Button</Button>
  </>
);

Card

Card 组件可以用来包裹其它组件，使其具有更加美观的外观。

import React from 'react';
import { Card } from 'rms-meteor-styles';

export default () => (
  <Card>
    <p>This is a card!</p>
  </Card>
);

你可以自定义 Card 的样式和内容，或者控制它的宽度：

export default () => (
  <Card style={{ backgroundColor: '#eee', color: 'red' }} width="400px">
    <h2>This is a custom card!</h2>
    <p>You can put anything inside this card.</p>
  </Card>
);

示例代码

下面是一个包含了 Button 和 Card 的示例组件：

-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ---- - ---- --------------------

------ ------- -- -- -
  ----- -------- ---------------- ------ ---
    -------- ---- -----------
    -------- --- ------ ----------
    ------- ------------------------------
  -------
--

总结

rms-meteor-styles 是一个在企业应用中非常实用的样式库，它包含了丰富的样式和有用的组件，可以帮助你更加快速地搭建出高质量的应用程序。希望这篇文章能够帮助到你更快地上手使用该库，并在以后的开发中得到帮助。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573ac81e8991b448e9a68