{{announcement.body}}
{{announcement.title}}

React Dashboard Ultimate Guide Part 3: Customize UI

DZone 's Guide to

React Dashboard Ultimate Guide Part 3: Customize UI

In this article, we complete our series on building React dashboards with GraphQL and Cube.js by showing you how to customize the UI with LESS.

· Web Dev Zone ·
Free Resource

This is the last part of a guide on building dynamic analytics dashboards and applications with React, GraphQL, and Cube.js. It covers an introduction to the customization of the UI. At the end of the blog post, I'll add links to the customization of individual components of the dashboard, such as query builders and the charts themselves. The online demo is available here. Parts one and two are available at their respective links. 

The dashboard template was generated using the Ant Design UI React library. It is one of the most popular React UI kits, alongside Material UI. It uses Less as a stylesheet language and allows us to customize the design by overriding default Less variables.

As I mentioned in the first chapter, our Dashboard App is based on Create React App (CRA). Currently, it doesn’t support Less out of the box, and to make it work, we need to use an eject command.

Create React App provides a fully configured environment and a default configuration. And all this configuration is hidden from you. But, when you eject, all that configuration will be exposed to you. This means that you will get full control and be able to add things like Less support. But at the same time, you will be responsible for maintaining all of that configuration.

You may also like: Data Visualization With the Highcharts React Wrapper Dashboard.

Eject is irreversible. You need to commit your changes before and then run eject in the dashboard-app folder.

$ git commit -a $ yarn eject

Once you’ve run it, you can find a new folder called config. Inside the config folder, you can find all the project configuration files, but today, we only need the webpack.config.js file.

Now let’s install Less.

$ yarn add less less-loader

Next, we need to modify the webpack configuration file. Open config/webpack.config.js and
find the cssRegex constant and change it:

-const cssRegex = /\.css$/; +const cssRegex = /\.(?:le|c)ss$/;

Then, find the getStyleLoaders function. On the use array, after the css-loader object, add:

{ loader: require.resolve('less-loader'), options: { importLoaders: 1,
javascriptEnabled: true, } }

That’s it! With this in place, we are ready to override some of the antd’s default variables and styles. We are going to customize some variables according to the antd’s Customize Theme guide.

Create a dashboard-app/src/variables.less file with the following content.

LESS




x
30


1
// Colors 
2
@dark-blue: #43436B; 
3
@primary-color: @blue-6; 
4
 
          
5
// Base Scaffolding Variables 
6
@font-family: 'DM Sans', sans-serif; 
7
@font-size-base: 16px; 
8
@body-background: #EEEEF5; 
9
@heading-color: @dark-blue; 
10
@text-color: #878F9F; 
11
 
          
12
// Layout 
13
@layout-header-background: @dark-blue; 
14
@layout-body-background: #EEEEF5; 
15
@layout-header-height: 48px; 
16
// Buttons 
17
@btn-primary-bg: #FF6492; 
18
@btn-height-base: 40px; 
19
@btn-disable-color: white; 
20
@btn-disable-bg: #FF6492; 
21
@btn-disable-border: #FF6492; 
22
@btn-default-color: @dark-blue; 
23
@btn-default-border: #D0D0DA; 
24
 
          
25
// Input 
26
@input-color: @dark-blue; 
27
@input-height-base: 40px; 
28
 
          
29
// Select 
30
@select-border-color: #ECECF0; 
31
// Modal 
32
@modal-body-padding: 32px; 
33
 
          
34
// Typography 
35
@typography-title-font-weight: bold;
32
@modal-body-padding: 32px; 



Next, let’s create an index.less file, which will be imported in index.js. Here, we do several things: import and styles, import the Dm Sans font from Google Fonts, import the just-created file with modified variables, and finally, add some minor customization.

LESS




xxxxxxxxxx
1
14


 
1
@import '~antd/dist/antd.less'; 
2
@import url('https://fonts.googleapis.com/css?family=DM+Sans&display=swap&css'); 
3
@import 'variables.less'; 
4
.ant-btn-primary[disabled] { opacity: 0.4; } 
5
.ant-modal-header { 
6
    border-bottom: none; 
7
    padding: 40px 32px 0 32px; 
8
} 
9
.ant-modal-footer { 
10
  border-top: none; 
11
  padding: 0 32px 40px 32px; text-align: left; 
12
} 
13
.ant-select { color: @dark-blue; } 
14
.ant-select-dropdown-menu-item { color: @dark-blue; }



The last thing is to import the index.less in our index.js. Replace the old import of index.css and feel free to delete this old file as well.

-import "./index.css"; +import "./index.less";

The styles above customize our design globally, changing the look of some components. But to customize some specific components, like the top menu, we are going to use Styled Components.

Styled Components allow you to write CSS right inside your components. It is a variant of “CSS-in-JS” — which solves many of the problems with traditional CSS like selector name collisions.

Let’s first add styled-components to our project.

$ yarn add styled-components

The first component to style with Styled Components is going to be the <Header />. Let’s first download a logo in SVG. We are using the Cube.js logo here as an example, but you can place your product’s logo the same way.

$ cd dashboard-app/src/components && curl http://cube.dev/downloads/logo.svg >
logo.svg

Next, replace the content of the src/components/Header.js with the following.

JavaScript
x
49
 
1
import React from "react";
2
import {
3
    SignOut
4
} from "aws-amplify-react";
5
import {
6
    Layout,
7
    Menu
8
} from "antd";
9
import {
10
    Link
11
} from "react-router-dom";
12
import styled from 'styled-components';
13
import logo from './logo.svg';
14
const StyledHeader = styled(Layout.Header)
15
` padding: 0 28px `
16
const StyledMenu = styled(Menu)
17
` background: transparent; line-height: 41px; `
18
const MenuItemStyled = styled(Menu.Item)
19
` && { 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; } `
20
const Logo = styled.div ` float: left; margin-right 40px; `
21
const signOutStyles = {
22
    navButton: {
23
        color: "white",
24
        background: "none",
25
        textTransform: "none",
26
        fontSize: "13px",
27
        fontWeight: "bold",
28
        minWidth: 0
29
    }
30
}
31
const Header = ({
32
    location
33
}) => ( < StyledHeader > < Logo > < img src = {
34
        logo
35
    }
36
    /> </Logo > < StyledMenu mode = "horizontal"
37
    selectedKeys = {
38
        [location.pathname]
39
    } > < MenuItemStyled key = "/explore" > < Link to = "/explore" > Explore < /Link> </MenuItemStyled > < MenuItemStyled key = "/" > < Link to = "/" > Dashboard < /Link> </MenuItemStyled > < MenuItemStyled style = {
40
        {
41
            float: "right",
42
            paddingRight: 0
43
        }
44
    }
45
    key = "sign-out" > < SignOut theme = {
46
        signOutStyles
47
    }
48
    /> </MenuItemStyled > < /StyledMenu> </StyledHeader > );
49
export default Header;


Yay! We’ve finished another chapter. We have customized global antd variables and updated the design of our navigation bar. Restart the Dashboard App server and test the changes at http://localhost:3000.

I hope it gives you a general idea of how to customize your dashboard. Below you can find links to customization guides of the specific components of the dashboard:


Please let me if you have any questions or feedback about this guide — I'd love to hear from you, thank you!


Further Reading

Topics:
javascript ,web dev ,angular ,react ,spa ,visualization ,less

Published at DZone with permission of Artyom Keydunov . See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}