React Dashboard 终极指南。第三部分：自定义 UI
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
这是使用 React、GraphQL 和 Cube.js 构建动态分析仪表板和应用程序指南的最后一部分。本部分将介绍 UI 的自定义方法。在博文末尾，我将添加有关自定义仪表板各个组件（例如查询构建器和图表本身）的链接。
此外，您可以在下方看到最终应用程序的演示。在线演示请点击此处。
我们生成的仪表盘模板的所有 UI 组件都使用了Ant Design UI React 库。它是与 Material UI 齐名的最流行的 React UI 工具包之一。它使用Less作为样式表语言，允许我们通过覆盖默认的 Less 变量来自定义设计。
正如我在第一章中提到的，我们的仪表盘应用是基于 Create React App (CRA) 开发的。目前，它本身并不支持 Less，我们需要通过命令行来实现eject。
Create React App 提供了一个完全配置好的环境和一个默认配置。所有这些配置对您都是隐藏的。但是，当您使用 Create React App 时eject，所有这些配置都会对您可见。这意味着您将获得完全的控制权，并能够添加诸如 Less 支持之类的功能。但与此同时，您也需要负责维护所有这些配置。
eject此操作不可逆。您需要先提交更改，然后再eject在dashboard-app文件夹中运行。
$ git commit -a
$ yarn eject
运行程序后，您可以找到一个名为 . 的新文件夹config。在 config 文件夹中，您可以找到所有项目配置文件，但今天我们只需要webpack.config.js. 文件。
现在我们来安装 Less。
$ yarn add less less-loader
接下来，我们需要修改 webpack 配置文件。打开config/webpack.config.js并
找到cssRegex常量并进行修改：
-const cssRegex = /\.css$/;
+const cssRegex = /\.(?:le|c)ss$/;
然后，找到该getStyleLoaders函数。在use数组中，对象之后css-loader，添加：
{
loader: require.resolve('less-loader'),
options: {
importLoaders: 1,
javascriptEnabled: true,
}
}
好了！现在，我们可以覆盖一些antd默认变量和样式了。我们将根据主题自定义指南来定制一些变量antd。创建一个
包含dashboard-app/src/variables.less以下内容的文件。
// Colors
@dark-blue: #43436B;
@primary-color: @blue-6;
// Base Scaffolding Variables
@font-family: 'DM Sans', sans-serif;
@font-size-base: 16px;
@body-background: #EEEEF5;
@heading-color: @dark-blue;
@text-color: #878F9F;
// Layout
@layout-header-background: @dark-blue;
@layout-body-background: #EEEEF5;
@layout-header-height: 48px;
// Buttons
@btn-primary-bg: #FF6492;
@btn-height-base: 40px;
@btn-disable-color: white;
@btn-disable-bg: #FF6492;
@btn-disable-border: #FF6492;
@btn-default-color: @dark-blue;
@btn-default-border: #D0D0DA;
// Input
@input-color: @dark-blue;
@input-height-base: 40px;
// Select
@select-border-color: #ECECF0;
// Modal
@modal-body-padding: 32px;
// Typography
@typography-title-font-weight: bold;
接下来，我们创建一个index.less文件，该文件将被导入index.js。在这里，我们做几件事：导入 antd 样式，从 Google Fonts 导入 Dm Sans 字体，导入刚刚创建的带有修改变量的文件，最后，添加一些小的自定义项。
@import '~antd/dist/antd.less';
@import url('https://fonts.googleapis.com/css?family=DM+Sans&display=swap&css');
@import 'variables.less';
.ant-btn-primary[disabled] {
opacity: 0.4;
}
.ant-modal-header {
border-bottom: none;
padding: 40px 32px 0 32px;
}
.ant-modal-footer {
border-top: none;
padding: 0 32px 40px 32px;
text-align: left;
}
.ant-select {
color: @dark-blue;
}
.ant-select-dropdown-menu-item {
color: @dark-blue;
}
最后一步是导入index.less到我们的系统中index.js。替换旧的导入文件index.css，您也可以删除旧文件。
-import "./index.css";
+import "./index.less";
以上样式可以全局自定义我们的设计，改变部分组件的外观。但要自定义某些特定组件，例如顶部菜单，我们将使用样式组件。
Styled Components 允许你直接在组件内部编写 CSS。它是“CSS-in-JS”的一种变体，解决了传统 CSS 的许多问题，例如选择器名称冲突。
我们先来styled-components给我们的项目添加一些内容。
$ yarn add styled-components
首先，我们要使用 Styled Components 来设置样式，第一个要添加样式的是 `<logo>` 标签<Header />。我们先下载一个 SVG 格式的 logo。这里我们以 Cube.js 的 logo 为例，但你可以用同样的方法放置你产品的 logo。
$ cd dashboard-app/src/components && curl http://cube.dev/downloads/logo.svg > logo.svg
接下来，将内容替换src/components/Header.js为以下内容。
import React from "react";
import { SignOut } from "aws-amplify-react";
import { Layout, Menu } from "antd";
import { Link } from "react-router-dom";
import styled from 'styled-components';
import logo from './logo.svg';
const StyledHeader = styled(Layout.Header)`
padding: 0 28px
`
const StyledMenu = styled(Menu)`
background: transparent;
line-height: 41px;
`
const MenuItemStyled = styled(Menu.Item)`
&& {
top: 4px;
border-bottom: 4px solid transparent;
&:hover {
border-bottom: 4px solid transparent;
& > a {
color: #ffffff;
opacity: 1;
}
}
}
&&.ant-menu-item-selected
{
color: white;
border-bottom: 4px solid white;
& > a {
opacity: 1;
}
}
&& > a {
color: #ffffff;
opacity: 0.60;
font-weight: bold;
letter-spacing: 0.01em;
}
`
const Logo = styled.div`
float: left;
margin-right 40px;
`
const signOutStyles = {
navButton: {
color: "white",
background: "none",
textTransform: "none",
fontSize: "13px",
fontWeight: "bold",
minWidth: 0
}
}
const Header = ({ location }) => (
<StyledHeader >
<Logo>
<img src={logo} />
</Logo>
<StyledMenu
mode="horizontal"
selectedKeys={[location.pathname]}
>
<MenuItemStyled key="/explore">
<Link to="/explore">Explore</Link>
</MenuItemStyled>
<MenuItemStyled key="/">
<Link to="/">Dashboard</Link>
</MenuItemStyled>
<MenuItemStyled style={{ float: "right", paddingRight: 0 }} key="sign-out">
<SignOut theme={signOutStyles} />
</MenuItemStyled>
</StyledMenu>
</StyledHeader>
);
export default Header;
太棒了！我们又完成了一个章节。我们自定义了全局变量并更新了导航栏的设计。重启仪表盘应用服务器，并在http://localhost:3000antd测试更改。
希望这能让您对如何自定义仪表盘有一个大致的了解。您可以在下方找到仪表盘各组件的自定义指南链接：
如果您对本指南有任何疑问或反馈，请告诉我——我很乐意听取您的意见，谢谢！
文章来源：https://dev.to/keydunov/react-dashboard-ultimate-guide-part-3-customize-ui-e82