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

Posted 2023-02-22

【中文标题】如何在 create-react-app 中自定义 blueprintjs 外观

【英文标题】：how to customize blueprintjs appearance in create-react-app

【发布时间】：2018-02-22 07:18:59

【问题描述】：

我是新手，我使用以下代码构建我的应用程序：

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

我不使用 webpack，因为 create-react-app 为我完成了所有工作，我认为这很好！

当然，我需要一个用于智能组件的工具箱。感谢 Palantir 免费提供这么好的库。 Blueprintjs 与 React/Typescript 配合得很好，[即使许多类仍未在 typescript 中创建（例如：我必须将 用于“pt-breadcrumbs”，而为“pt-breadcrumb”提供类 Breadcrumb）。但除此之外，工具箱还可以。]

现在我想自定义应用程序的外观和感觉，以满足客户的约束：

背景和文字颜色 圆角与否 字体系列和大小 图标列表 组件的填充 转换延迟 等

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

我应该在我的项目中添加一个 css 文件并覆盖 blueprintjs 类吗？ 我可以在我的项目之外编写一个“主题”，并将其复制到一些不同的项目中吗？ （就像我以前对 jqueryui 所做的那样） 我可以在不使用 webpack 的情况下做到这一点吗？ （我觉得这个工具太复杂了）

感谢您的帮助。

【问题讨论】：

我尝试将 node_modules/testlib-blueprint/node_modules/@blueprintjs/core/src 复制到项目的 src/theme 并让 IntelliJ 使用文件监视器编译 scss，但我有很多我无法解决的错误。任何想法将不胜感激。

【参考方案1】：

我正在评估公司标准化 React 组件库的蓝图，我们可以让开发人员使用通用的外观和感觉。蓝图可让您对组件的某些视觉元素进行样式设置，但（有意）在不覆盖全局标准样式表的情况下（有意地）无法让您完全控制（这是其他答案本质上所暗示的）。我建议您使用公开的 SASS/LESS 变量。这是一种不使用 webpack 或弹出 create-react-app 项目的方法。

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

npm install 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/"

将 SASS 文件（如 App.scss）添加到上面引用的位置 (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），则自动构建脚本将失败。只需运行上面的手动构建步骤，手表触发的重建就会正常工作。

参考（或查看）您生成的 .css 文件。它将是蓝图 css 文件和您的自定义项的组合。可以在html中正常引用：

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

或在您的代码中：

import './App.css';

然后根据需要使用它：

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

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

【讨论】：

步骤很多！对于 blueprintJs3，我只需要：1) 安装 node-saas：npm install node-sass --save 2) 导入 blueprint 的 SASS 文件：@import "~@blueprintjs/core/src/blueprint.scss"; 它可以工作！

@Kiruahxh 是对的！如果您使用 Gatsby，请按照gatsbyjs.com/docs/sass/#installing-and-configuring-sass 设置 saas 编译器，然后创建您自己的 saas 文件来修改 Blueprint 的样式。

【参考方案2】：

所以最简单的方法是通过React's Component Styles 传递您的自定义样式。

假设我们要更改 <Button> 组件中文本的字体大小和颜色。

我们首先声明我们的风格：

const buttonStyle = 
 fontSize: '30pt',
 color: 'pink',
 height: '40pt'

然后在 React 类中 render() 将新样式传递给您的 <Button> 组件：

<Button className="pt-intent-primary" text="My button" style=buttonStyle/>

【讨论】：

感谢 Shahzeb，我知道这是一种可能性。同时，这是 javascript 代码。如果我想构建一个可以从一个项目复制到另一个项目的主题，我不能使用这种方式。如果我可以在项目中添加一个 css，那么我可以将这个 css 复制到其他项目中。使用 css 文件，我只能用 !important 覆盖 Blueprint css，这并不完美......

如果您想要应用style.css 文件并希望它覆盖Blueprint 的一些css，那么您想使用<link rel... 在index.html 函数中链接到您的样式表。然后使用它们的className 引用各种元素以更改它们的样式。

【参考方案3】：

我建议在（即 myTheme.css）中创建您自己的主题。

.pt-myTheme 
  .pt-navbar 
    background-color: #2364f0;
  

在 React 中直接将其添加到蓝图组件中：

render() 
  <Navbar className="pt-myTheme"></Navbar>

或者到您的应用根目录中的容器：

render() 
  <div className="container pt-myTheme">
    <Navbar>
      ...
    </Navbar>
  </div>