css - 如何在 create-react-app 中自定义 blueprintjs 外观

Question

我是 React 新手，我使用以下方法构建我的应用程序:

create-react-app applicationame --scripts-version=react-scripts-ts

我不使用 webpack，因为 create-react-app 为我做了一切，我认为它很好!

当然我需要一个智能组件的工具箱。感谢 Palantir 免费提供这么好的库。 Blueprintjs 与 React/Typescript 配合得很好，[即使许多类仍未在 typescript 中创建(例如:我必须将

用于“pt-breadcrumbs”，而类 Breadcrumb 是为“pt-breadcrumb”提供的)。但除此之外，工具箱还可以。]

现在我想自定义应用程序的外观，以满足客户的限制:

• 背景和文字颜色
• 是否圆 Angular
• 字体系列和大小
• 图标列表
• 组件的填充
• 过渡延迟
• 等等

我在任何地方都找不到自定义所有这些的文档。 (查看文档，在 github 中，在 stackoverflow 中进行大量谷歌搜索和搜索)

• 我应该在我的元素中添加一个 css 文件并覆盖 blueprintjs 类吗？
• 我可以在我的元素之外编写一个“主题”，然后将它复制到一些不同的元素中吗？ (就像我以前用 jqueryui 做的那样)
• 我可以不使用 webpack 来做吗？ (我觉得这个工具太复杂了)

感谢您的帮助。

Answer 1

我正在为公司的 React 组件标准化库评估 Blueprint，我们可以让开发人员使用通用的外观和感觉。 Blueprint 允许您设置组件的某些视觉元素的样式，但(有意地)不会在不覆盖全局标准样式表的情况下为您提供完全控制(这是其他答案本质上的建议)。我建议您使用公开的 SASS/LESS 变量。这是一种不使用 webpack 或弹出 create-react-app 元素的方法。

注意:这是针对 Blueprint v2 的，我使用的是 react-app-rewired和SASS

• npm 安装 node-sass-chokidar和 node-sass-tilde-importer (第一个将预处理您的 SASS 文件，您需要第二个，因为 Blueprint 对 webpack 使用的导入使用“~”约定，但默认的 node-sass 不支持)

• 为您的包添加一个“build-css”脚本引用，看起来与此类似(它告诉 node-sass-chokidar 使用 tilde-importer 包):

  "build-css": "node-sass-chokidar --importer=node_modules/node-sass-tilde-importer --include-path ./src --include-path ./node_modules src/ -o src/"

• 将 App.scss 等 SASS 文件添加到上面引用的位置 (src/):

`

// override the blueprint default variable values first
$pt-intent-danger:  #ff3d00;
$pt-intent-primary: #076461;

// then pull in top-level blueprint sass file (it imports all the sub-files)
@import "@blueprintjs/core/src/blueprint.scss";

// add custom variables (optional)
$sassy-text: #ff3d7f;
$sassy-background: #c2a34f;

//add your own custom styles (optional)
.sassy-hello {
   color:$sassy-text;
   background:$sassy-background;
   padding: 5px;
}

• 运行您的构建 css 脚本:

  npm run build-css

注意 node-sass-chokidar 文件观察器和一些编辑器存在一个已知问题。它非常轻巧且快速；如果您的编辑器在更新的 .scss 文件上锁定了片刻(如 VS Code)，自动构建脚本将失败。只需运行上面的手动构建步骤， watch 触发的重建就会正常工作。

• 引用(或查看)您生成的 .css 文件。它将是蓝图 css 文件和您的自定义项的组合。你可以在html中正常引用它:

  <link href="App.css" rel="stylesheet" />

  或在您的代码中:

  import './App.css';

  然后根据需要使用它:

  <h1 className="sassy-hello">Hey, Good-Looking!</h1>

您始终可以添加覆盖或补充核心样式的自定义样式表，但如果您尝试在蓝图之上构建自己的一致主题，我认为这是可行的方法。您还可以根据需要/要求内联或 CSS 到 JS 样式。