跨共享包的 Scss 覆盖变量 主题/_colors.scsstheme/theme.scss按钮/Button.scss按钮/Button.jsxApp.scssApp.jsx

问题描述

我正在创建一个 React Storybook 应用程序，它由组件包组成，例如一个 Button 和一个 Theme 包。我希望客户端应用程序能够设置品牌颜色。我正在使用 dart-sass。

故事书组件

主题/按钮是单独的包

主题/_colors.scss

$brand: red !default;

theme/theme.scss

这是主题的主要包导出

@forward "colors" as color_*;

按钮/Button.scss

@use "theme" as theme;

button {
    background-color: theme.$color_brand;
}

按钮/Button.jsx

这是主要的包导出

import "./Button.scss";

//Component code below

客户端应用

App.scss

@use "theme" as theme with (
    $color_brand: blue
);

h1 {
    color: theme.$color_brand;
}

App.jsx

import React from "react";
import ReactDOM from "react-dom";

import "./App.scss";

import Button from "button";

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                {/* Correct: h1 appears blue */}
                <h1>Example</h1>

                {/* Problem: Button background is still red */}
                <Button>Submit</Button>
            </div>
        );
    }
}

let domContainer = document.querySelector("#app");
ReactDOM.render(<App />,domContainer);

在此示例中，应用将主题包中的品牌颜色设置为蓝色（默认为红色）。 Button 包和我们的 App 都使用 Theme 包。 h1 显示为蓝色，但按钮背景显示为红色。似乎 Button 组件没有获得颜色更新。关于如何实现这一目标的任何想法？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）