Question

处理以下场景的模块化方式是什么：应用程序具有所有标题标记（h1，h2，h3等）的常规样式。特定组件Widget.jsx可以使用这些标题中的任何一个，但具有针对h1标签的特殊样式。在＆＃34; olden＆＃34; CSS的几天，我会处理这个将由（可能）单个样式表中的继承处理。 E.g。

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

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

Widget.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，而且没有＆＃34;全局＆＃34;这些类的定义（与模块化CSS最佳实践保持一致），但我倾向于认为明确地将其他标题类组成.h2, .h3, .h4 ...类也不是答案。 E.g。

_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的概念很陌生。

Answer 1

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

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

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

所以现在styles包含所有类型标题的标记，并在可用时使用窗口小部件覆盖。

模块化CSS和应用程序范围的样式

1 个答案: