3

处理以下场景的模块化方式是什么：应用程序具有所有标题标签（h1、h2、h3 等）的通用样式。一个特定的组件 Widget.jsx 可以使用这些标题中的任何一个，但对 h1 标签有特殊的样式。在 CSS 的“旧”时代，我会通过（可能）单个样式表中的继承来处理这个问题。例如

.h1 { font-size: 3rem; /* more styles */ }
.h2 { font-size: 2.5rem; /* more styles */ }
...
.Widget--h1 { font-size: 1.5rem; }

显然，以上内容不适合 CSS 的模块化方法，但我不确定如何以模块化方式完成上述场景。接下来是我解决问题的初步尝试。

小部件.jsx

import React from "react";
import CSSModules from "react-css-modules";
import styles from "./_widget.less";

@CSSModules( styles )
export default class Widget extends React.Component {

    render () {
        return (
            <div>
                <h1 styleName="h1">Chewbacca</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam blanditiis, explicabo illo dignissimos vitae voluptatibus est itaque fuga tenetur, architecto recusandae dicta dolorem. Velit quidem, quos dignissimos unde, iste amet?</p>
                <h2 styleName="h2">The "Walking Carpet"</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
        );
    }

}

_widget.less

.h1 {
    composes: h1 from "atoms/text/_text.less";
    font-family: "Comic Sans MS", cursive, sans-serif;
}

原子/文本/_text.less

@import (reference) "~styles/variables/_fonts.less";

/* Headings
   ============================= */
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: normal;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-left: 0px;
}
.h1 { font-family: @primary-font; }
.h2 { font-family: @primary-font; }
.h3 { font-family: @primary-font; }
.h4 { font-family: @primary-font; }
.h5 { font-family: @primary-font; }
.h6 { font-family: @primary-font; }

它一直有效，直到使用通用的、未修改的类之一（.h2）。显然，问题在于这些类.h2没有定义_widget.less并且没有“全局”定义（与模块化 CSS 最佳实践保持一致），但我倾向于认为将其他标题类显式组合到.h2, .h3, .h4 ...类中并不是要么回答。例如

_widget.less

.h1 {
    composes: h1 from "atoms/text/_text.less";
    font-family: "Comic Sans MS", cursive, sans-serif;
}
.h2 { composes: h2 from "atoms/text/_text.less"; }
.h3 { composes: h3 from "atoms/text/_text.less"; }
...

另一个可能的解决方案是@import将一般标题样式放入_widget.less文件中。

_widget.less

@import @import "~atoms/text/_text.less";
.h1 {
    composes: h1 from "atoms/text/_text.less";
    font-family: "Comic Sans MS", cursive, sans-serif;
}

该解决方案的问题在于，每次我使用来自可交付代码的样式_text.less并膨胀我的可交付代码时，这些样式都会被复制。

关于如何最好地解决此类问题的任何想法？我对模块化 CSS 的概念很陌生。

4

1 回答 1

1

在这种情况下，您希望使用自定义覆盖一组默认类，一种方法是使用Object.assign：

import defaultStyles from "atoms/text/_text.less"
import widgetStyles from "./_widget.less"

const styles = Object.assign({}, defaultStyles, widgetStyles)

所以现在styles包含各种标题的标记，并在可用时使用小部件覆盖。

于 2016-03-18T04:57:54.660 回答