如何在创建反应应用程序中自定义blueprintjs外观

Question

我刚开始反应，我用以下方法构建应用程序：

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

我不使用webpack，因为创建-反应-应用为我做的一切，我认为它只是好！

当然，我需要一个智能组件工具箱。感谢Palantir免费提供这么好的图书馆。Blueprintjs可以很好地处理React/类型记录，即使在类型记录中仍然没有创建许多类(例如:我必须使用“pt-面包屑”，而类breadcrumbs是为“pt-面包屑”提供的)。但除此之外，工具箱也没问题。

现在，我想定制应用程序的外观和感觉，以满足客户的限制：

• 背景和文字颜色
• 圆角或非圆角
• 字体族和字体大小
• 图标列表
• 部件填充
• 过渡延迟
• 等。

我在任何地方都找不到可以定制这些的文档。(在文档中查找，在github中查找，在堆栈溢出中进行大量搜索和搜索)

• 我应该在我的项目中添加一个css文件并覆盖blueprintjs类吗？
• 我可以在我的项目之外创作一个“主题”，并将其复制到不同的项目中吗？(就像我以前和jqueryui一样)
• 我可以不用webpack做这个吗？(我觉得这个工具太复杂了)

谢谢你的帮助。

Answer 1

我正在评估公司的React组件标准化库的蓝图，在这里我们可以让开发人员使用共同的外观和感觉。蓝图允许您对组件的某些可视元素进行样式化，但是(有意)在不覆盖全局标准样式表(这正是其他答案所暗示的)的情况下，不会给您提供完全的控制。我建议您使用公开的SASS/LESS变量。这里有一个方法可以避免使用webpack或弹出您的创建-反应-应用程序项目。

注意：，这是v2的蓝图，我使用反应-应用程序-重新连线和SASS

• npm安装节点sass-chokidar和节点-sass-倾斜-进口商 (第一个将预处理您的SASS文件，而您需要第二个，因为Blueprint对webpack使用的导入使用"~“约定，但默认的节点sass不支持)。
• 向您的包添加一个类似于此的“build”脚本引用(它告诉node 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文件添加到上面引用的位置(src/)，如App.scss：

`

// 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

注意到节点-sass-chokidar文件观察者和一些编辑器有一个已知的问题。它是非常轻量级和快速的；如果您的编辑器在更新的.scss文件上持有一个锁(如VS代码)，那么自动生成脚本将失败。只需在上面运行手动生成步骤，由手表触发的重建将正确工作。

• 引用(或查看)生成的.css文件。它将是Blueprint文件和您的自定义的组合。您可以在html中引用它： <link href="App.css" rel="stylesheet" /> 或者在你的代码中： import './App.css'; 然后按要求使用： <h1 className="sassy-hello">Hey, Good-Looking!</h1>

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

Answer 2

因此，最简单的方法是通过反应组分样式传递您的自定义样式。

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

我们首先宣布我们的风格：

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

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

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

Answer 3

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

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

在React中，只需将其直接添加到Blueprint组件中：

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

或者应用程序根目录中的容器：

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