Css 如何在CreateReact应用程序中自定义blueprintjs外观

我是一个新的反应者，我用以下方法构建我的应用程序：

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

我不使用webpack，因为CreateReact应用程序为我做了所有事情，我认为它很好

当然，我需要一个用于智能组件的工具箱。感谢帕兰蒂尔免费提供这么好的图书馆。Blueprintjs与React/Typescript配合得很好，[即使许多类仍然没有在Typescript中创建（例如：我必须为“pt Breadcrumb”使用

，而为“pt Breadcrumb”提供类Breadcrumb”）。但除此之外，工具箱也没问题。]
现在，我想定制应用程序的外观，以满足客户的约束：
• 背景和文本颜色
• 圆角与否
• 字体系列和大小
• 图标列表
• 组件的填充
• 过渡延迟
• 等等
我没有找到任何文档来定制所有这些。（在文档中查找，在github中查找，在Google上搜索，在stackoverflow中搜索）
• 我应该在项目中添加css文件并覆盖blueprintjs类吗
• 我可以在我的项目之外撰写一个“主题”，并将其复制到一些不同的项目中吗？（就像我以前对jqueryui做的那样）
• 我可以不用webpack来做这个吗？（我觉得这个工具太复杂了）

---

感谢您的帮助。
因此，最简单的方法是通过将自定义样式传递给
假设我们想要更改
组件中文本的字体大小和颜色
我们首先宣布我们的风格：

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

然后在React类中

render（）

将该新样式传递给
组件：

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

---

我建议您在中创建自己的主题（即myTheme.css）
在React中，只需将其直接添加到Blueprint组件：

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

render（）{
}

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

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

render（）{
...
}

我正在评估公司标准化React组件库的蓝图，我们可以让开发人员使用通用的外观和感觉。Blueprint允许您设置组件的某些视觉元素的样式，但（有意地）在不覆盖全局标准样式表（其他答案基本上都是这样建议的）的情况下，无法提供完整的控制。我建议您使用公开的SASS/LESS变量。这里有一种方法可以做到这一点，而无需使用webpack或弹出CreateReact应用程序项目
注意：这是针对Blueprint v2的，我正在使用和SASS
• npm安装和（第一个将预处理您的SASS文件，您需要第二个，因为Blueprint对webpack使用的导入使用“~”约定，但默认节点SASS不支持）

• 向包中添加一个“build css”脚本引用，该脚本引用将类似于此（它告诉node sass chokidar使用tilde导入程序包）：

  “构建css”：“节点sass chokidar--importer=node_modules/node sass tilde importer--include path./src--include path./node_modules src/-o src/”

• 将类似App.scss的SASS文件添加到上述位置（src/）：

`
• 运行构建css脚本：

  npm运行构建css

注意节点sass chokidar文件查看器和一些编辑器存在已知问题。它是非常轻和快速；如果编辑器在更新的.scss文件上锁定了一会儿（如VS代码），则自动生成脚本将失败。只需运行上面的手动构建步骤，监视触发的重建就会正常工作
• 引用（或查看）生成的.css文件。它将是Blueprint css文件和您的定制的组合。您可以在html中正常引用它：
  或者在您的代码中：

  import'/App.css'
  
  然后根据需要使用它：
  
  嘿，漂亮
  

---

您总是可以添加覆盖或补充核心样式的自定义样式表，但如果您试图在Blueprint之上构建自己的一致主题，我认为这是一种方法。您也可以根据需要将样式内联或CSS添加到JS中。
谢谢Shahzeb，我知道这是一种可能性。同时，这是javascript代码。如果我想构建一个可以从一个项目复制到另一个项目的主题，我不能使用这种方式。如果我可以将css添加到项目中，那么我可以将此css复制到其他项目中。使用css文件，我只能用css覆盖Blueprint！重要的是，这并不完美…如果你有一个

style.css

文件，你想应用它覆盖Blueprint的一些css，那么你想使用

我试图将node_modules/testlib Blueprint/node_modules/@blueprintjs/core/src复制到项目的src/theme中，并让IntelliJ使用文件监视程序编译SCS，但是我有很多错误我无法解决。任何想法都将不胜感激。这需要很多步骤！对于blueprintJs3，我只需要：1）安装节点saas:
npm安装节点sass——保存
2）导入blueprint的sass文件：
@Import“~@blueprintjs/core/src/blueprint.scss”并且它工作@基鲁阿什是对的！如果您使用Gatsby，请按照下面的步骤设置saas编译器，然后创建自己的saas文件来修改Blueprint的样式。
render() {
  <div className="container pt-myTheme">
    <Navbar>
      ...
    </Navbar>
  </div>
}

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