React.js Blueprint 颜色使用

Blueprint 是一个基于 React 的用于 web 的 UI 工具包。该库非常优化，适用于构建复杂且数据密集的桌面应用程序界面。

在本文中，我们将讨论 React.js Blueprint 的颜色使用。颜色是在样式化 web 应用程序中非常重要的组件。React.js Blueprint 提供了在 Sass、Less 和 JavaScript 语言中使用的颜色变量。

Blueprint 颜色使用：

Sass 中的 Blueprint： Blueprint 颜色用于 Sass 脚本语言，Sass 是一种编译为 CSS 的预处理样式表语言。
Less 中的 Blueprint： Blueprint 颜色用于 Less，Less 是一种动态预处理样式表语言，也会被编译为 CSS。
JavaScript 中的 Blueprint： Blueprint 颜色用于 JavaScript，因为 Blueprint 是基于 React 的库，使用的是 JavaScript。

语法：

// Color usage in Sass
@import "~@blueprintjs/core/lib/scss/variables";

.rule {
    background: $red;
}

// Color usage in Less
@import "~@blueprintjs/core/lib/less/variables";
.rule {
    background: @Red;
}

// Color usage in JavaScript
import { Colors } from "@blueprintjs/core";

<div style={{ background: Colors.RED }} />

创建React应用程序并安装模块：

步骤1： 使用以下命令创建一个React应用程序：

npm create-react-app appname

步骤2： 在创建好的项目文件夹appname中，使用以下命令进入该文件夹：

cd appname

步骤3： 创建ReactJS应用程序后，使用以下命令安装所需的模块：

npm install @blueprintjs/core

项目结构：

React.js Blueprint 颜色使用

示例1： 以下示例演示了在Sass中使用颜色的用法。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import "./App.scss"; 
  
function App() { 
    return ( 
        <center> 
            <div style={{ padding: 20, textAlign: "center",  
                color: "green" }}> 
                <h1>ReactJS BluePrint Colors Usage</h1> 
            </div> 
            <div> 
                <div 
                    className="button"
                    style={{ 
                        padding: 20, 
                        textAlign: "center", 
                        width: 100, 
                        borderRadius: 50, 
                    }} 
                > 
                    Sass 
                </div> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

CSS

/* Write SASS Here */
@import "~@blueprintjs/core/lib/scss/variables"; 
  
.button { 
    color:  $white; background:$ blue1; 
}

输出：

React.js Blueprint 颜色使用

示例2： 以下是Less中使用颜色的示例。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import "./App.less"
  
function App() { 
    return ( 
        <center> 
            <div style={{ padding: 20, textAlign: "center", 
                color: "green" }}> 
                <h1>ReactJS BluePrint Colors Usage</h1> 
            </div> 
            <div> 
                <div 
                    className="button"
                    style={{ 
                        padding: 20, 
                        textAlign: "center", 
                        width: 100, 
                        borderRadius: 50, 
                    }} 
                > 
                    Less 
                </div> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

CSS

/* Write Less Here */
@import "~@blueprintjs/core/lib/less/variables"; 
  
.button { 
    color: @white; 
    background: @black; 
}

输出:

React.js Blueprint 颜色使用

示例3： 以下示例演示了JavaScript中使用颜色的方法。

import React from "react"; 
import "@blueprintjs/core/lib/css/blueprint.css"; 
import { Colors } from "@blueprintjs/core"; 
  
function App() { 
    return ( 
        <center> 
            <div style={{ padding: 20, textAlign: "center",  
                color: "green" }}> 
                <h1>ReactJS BluePrint Colors Usage</h1> 
            </div> 
            <div> 
                <div 
                    style={{ 
                        padding: 20, 
                        color: Colors.WHITE, 
                        background: Colors.GREEN3, 
                        width: 100, 
                        height: 50, 
                        borderRadius: 50, 
                        textAlign: "center", 
                    }} 
                > 
                    Click 
                </div> 
            </div> 
        </center> 
    ); 
} 
  
export default App;

输出:

React.js Blueprint 颜色使用