4

我是新来的反应，我用以下方式构建我的应用程序：

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

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

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

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

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

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

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

谢谢你的帮助。

4

3 回答 3

4

我正在为一个公司标准化的 React 组件库评估 Blueprint，我们可以让开发人员使用通用的外观和感觉。蓝图可让您对组件的某些视觉元素进行样式设置，但（有意）在不覆盖全局标准样式表的情况下（有意地）无法让您完全控制（这是其他答案本质上所暗示的）。我建议您使用公开的 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 您的样式。

于 2018-06-20T21:38:50.740 回答
0

所以最简单的方法是通过React 的 Component Styles传入你的自定义样式。

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

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

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

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

<Button className="pt-intent-primary" text="My button" style={buttonStyle}/>
于 2017-09-16T21:13:15.130 回答
0

我建议在（即 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>
}
于 2018-01-17T06:20:07.440 回答