样式方案
icejs 在工程能力上基本支持了所有社区主流样式方案,包括 Sass、Less、CSS Modules、Stylus 等方案,而作为框架配套的模板我们推荐使用 CSS Modules 方案。
#
全局样式对于整个项目的全局样式,统一定义在 src/global.[scss|less|scss]
文件中,框架会默认引入该文件:
#
局部样式对于页面级和组件级的样式,我们推荐使用 CSS Modules 的方案,这能很好的解决样式开发中的两个痛点问题:
- 全局污染:CSS 使用全局选择器机制来设置样式,优点是方便重写样式。缺点是所有的样式都是全局生效,样式可能被错误覆盖,因此产生了非常丑陋的
!important
,甚至 inline!important
等问题。 - 命名混乱:由于全局污染的问题,多人协同开发时为了避免样式冲突,选择器越来越复杂,容易形成不同的命名风格,很难统一,样式变多后,命名将更加混乱。
具体规范规则如下:
- 文件名:约定文件名格式如
xxx.module.scss
- 模块化:一个页面或者一个组件对应一个样式文件
在页面目录下新建 index.jsx
和 index.module.scss
两个文件:
在文件中引入对应的样式文件,并将 className
与对应样式关联:
使用该方案之后,上文中的 className 都会被编译为唯一性的名字,避免因为重名 className 而产生样式冲突,如果在浏览器里查看这个示例的 dom 结构,你会发现实际渲染出来是这样的:
更多 CSS Modules 文档请参考:
#
常见问题#
如何全局覆盖基础组件(next/antd)样式?next/antd 都支持了一些定制样式的能力,如果这些能力不能满足诉求则可以通过样式覆盖的方式定制:
该方式会把项目里所有 Button 组件的 font-size
属性修改掉。
#
如何局部覆盖基础组件样式?如果只是想覆盖某个页面/模块里的组件样式,则推荐采用局部覆盖的方式:
如果组件本身支持 style 属性,也可通过 style
属性修改: