样式分类

基于组件开发的 YIS，样式分为 YIS 组件样式，自封装组件样式，扩展主题样式。

• YIS 组件样式不需要处理，在打包时会将使用 import 引入组件相应的样式依赖引入到文件中。
• 自封装组件样式可以根据组件复用情况放在不同的位置。详见下面的目录结构列表以及注释说明。
• 扩展主题样式用于扩展 YIS 组件样式，如果自定义组件遵照 theme 方式引用样式亦可扩展自定义组件。

     ···
     |- src
        |- components
            // 项目级别组件 开放 brwoser 能力，样式维护在组件命名的文件夹下面
            |- test
                |- index.js
                |- browser.js
                |- main.css
        |- pages
            |-home
                |- components
                    // 页面级别的组件可以将组件 js 文件维护在页面文件夹 components 下面，样式文件维护在页面的 main.css 文件中既可。
                    |- menu.js
                |-index.js
                |-index.skel
                |-main.css
        |- themes
            // 用于扩展 YIS 组件样式主题，该文件应与 YIS 组件同名并引入 YIS 组件的 css
            |- button.css
    ···

     ···
     |- src
        |- components
            // 项目级别组件 开放 brwoser 能力，样式维护在组件命名的文件夹下面
            |- test
                |- index.js
                |- browser.js
                |- main.css
        |- pages
            |-home
                |- components
                    // 页面级别的组件可以将组件 js 文件维护在页面文件夹 components 下面，样式文件维护在页面的 main.css 文件中既可。
                    |- menu.js
                |-index.js
                |-index.skel
                |-main.css
        |- themes
            // 用于扩展 YIS 组件样式主题，该文件应与 YIS 组件同名并引入 YIS 组件的 css
            |- button.css
    ···

样式引入

基于 css-module 开发样式，在 css 文件中完成样式文件编写后引入相应的 js 文件中。

@import '@qnpm/yis/components/reset.css';

.options{
   ···
}
.container{
    ···
}
.container{
    ···
}

import { View, Animate, Button, Page } from "@qnpm/yis/components";
import Test from '../../components/test';
import { registerPage, PageCore } from "@qnpm/yis";
import styles from "./main.css";
import classnames from "classnames";

export default class Animatedemo extends PageCore {  render() {
        return (
            <Page>
                <div className={styles.options}>
                    ···
                </div>
                <div className={styles.container}>
                   ···
                </div>
                <div className={styles.container}>
                   ···
                </div>
            </Page>
        );
    }
}

import { Component } from '@qnpm/yis'
import { View } from '@qnpm/yis/components';
import styles from '../main.css';

export default class List extends Component {
  displayName= "List";
  theme = styles;
  render() {
      return (
          <div className={this.theme.list}>
              ···
          </div>
      )
  }
}