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

【问题标题】：how to customize blueprintjs appearance in create-react-app如何在 create-react-app 中自定义 blueprintjs 外观
【发布时间】：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 中查看文档，在 stackoverflow 中进行大量谷歌搜索）

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

感谢您的帮助。

【问题讨论】：

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

标签： css reactjs typescript blueprintjs

【解决方案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>
}

【讨论】：