Ant Design Theme Customization in Meteor React 1.4

Question

The instructions for customizing the Ant Design theme are here:

https://ant.design/docs/react/customize-theme

How would this work with Meteor React 1.4+? Would the "Overriding Less variables (alternative way)" be the correct method to use? Where would the LESS file go and how would it be accessed in React?

Answer 1

Similar to the answer by arcom with more detail on .babelrc. This worked using antd 2.7.1:

In .babelrc

{
  "plugins": [
    "transform-class-properties",
    "babel-root-slash-import"
  ]
}

Installed with

meteor npm i --save babel-plugin-transform-class-properties babel-root-slash-import

In theme.less, antd variables are accessible and new values overriding defaults

@import '{}/node_modules/antd/dist/antd.less';

// Color
@primary-color          : @green-6;

Answer 2

if you use babel-plugin-import the components less file will be included for you, all you need to do is configure your webpack to use less loader. if you want to customize theme, then you can add the modifyVar option in the less loader and it will replace for you.

You can check their configuration file, I followed that and it worked https://github.com/ant-tool/atool-build/blob/a4b3e3eec4ffc09b0e2352d7f9d279c4c28fdb99/src/getWebpackCommonConfig.js#L131-L138

Answer 3

• add the less package (for meteor)
• add a theme.less file on the client side
• paste in the default less variables from ant
• customize as needed

example less file:

@import '{}/node_modules/antd/dist/antd.less';



@font-face {
   font-family: 'Bariol_Bold';
    src: url('/fonts/Bariol_Bold.otf');
}

@font-face {
   font-family: 'Bariol_Bold_italic';
    src: url('/fonts/Bariol_Bold_italic.otf');
}

@font-face {
   font-family: 'Bariol_Light';
    src: url('/fonts/Bariol_Light.otf');
}

@font-face {
   font-family: 'Bariol_Light_italic';
    src: url('/fonts/Bariol_Light_italic.otf');
}

@font-face {
   font-family: 'Bariol_Thin';
    src: url('/fonts/Bariol_Thin.otf');
}

@font-face {
   font-family: 'Bariol_Thin_italic';
    src: url('/fonts/Bariol_Thin_italic.otf');
}




// Prefix
@ant-prefix             : ant;

// Color
//@primary-color          : #108ee9;
@primary-color          : #d70b52;
@success-color          : #87d068;
@error-color            : #f50;
@highlight-color        : #f50;
@warning-color          : #fa0;
@normal-color           : #d9d9d9;

// ------ Base & Require ------
@body-background        : #fff;
@component-background   : #fff;
@font-family            : 'Bariol_Thin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@code-family            : Consolas, Menlo, Courier, monospace;
@text-color             : #666;
@heading-color          : #404040;
@text-color-secondary   : #999;
@font-size-base         : 12px;
@font-size-lg           : @font-size-base + 2px;
@line-height-base       : 1.5;
@border-radius-base     : 4px;
@border-radius-sm       : 2px;

// ICONFONT
@iconfont-css-prefix    : anticon;
@icon-url               : "https://at.alicdn.com/t/font_r5u29ls31bgldi";

// LINK
@link-color             : #108ee9;
@link-hover-color       : tint(@link-color, 20%);
@link-active-color      : shade(@link-color, 5%);
@link-hover-decoration  : none;

// Animation
@ease-out            : cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in             : cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out         : cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back       : cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back        : cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back    : cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ       : cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ        : cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ    : cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint      : cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint       : cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint   : cubic-bezier(0.86, 0, 0.07, 1);

// Border color
@border-color-base      : #d9d9d9;        // base border outline a component
@border-color-split     : #e9e9e9;        // split border inside a component

// Outline
@outline-blur-size      : 0;
@outline-width          : 2px;
@outline-color          : @primary-color;

// Background color
@background-color-base  : #f7f7f7;        // basic gray background

// Shadow
@shadow-color           : rgba(0, 0, 0, .2);
@box-shadow-base        : @shadow-1-down;
@shadow-1-up            : 0 -1px 6px @shadow-color;
@shadow-1-down          : 0 1px 6px @shadow-color;
@shadow-1-left          : -1px 0 6px @shadow-color;
@shadow-1-right         : 1px 0 6px @shadow-color;
@shadow-2               : 0 2px 8px @shadow-color;

// Buttons
@btn-font-weight        : 500;
@btn-border-radius-base : @border-radius-base;
@btn-border-radius-sm   : @border-radius-sm;

@btn-primary-color      : #fff;
@btn-primary-bg         : @primary-color;
@btn-group-border       : shade(@primary-color, 5%);

@btn-default-color      : @text-color;
@btn-default-bg         : @background-color-base;
@btn-default-border     : @border-color-base;

@btn-ghost-color        : @text-color;
@btn-ghost-bg           : transparent;
@btn-ghost-border       : @border-color-base;

@btn-disable-color      : #ccc;
@btn-disable-bg         : @background-color-base;
@btn-disable-border     : @border-color-base;

@btn-padding-base       : 4px 15px;
@btn-font-size-lg       : @font-size-lg;
@btn-padding-lg         : 4px 15px 5px 15px;
@btn-padding-sm         : 1px 7px;

@btn-circle-size        : 28px;
@btn-circle-size-lg     : 32px;
@btn-circle-size-sm     : 22px;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs              : 480px;
@screen-xs-min          : @screen-xs;
@screen-xs-max          : (@screen-xs-min - 1);

// Small screen / tablet
@screen-sm              : 768px;
@screen-sm-min          : @screen-sm;
@screen-sm-max          : (@screen-sm-min - 1);

// Medium screen / desktop
@screen-md              : 992px;
@screen-md-min          : @screen-md;
@screen-md-max          : (@screen-md-min - 1);

// Large screen / wide desktop
@screen-lg              : 1200px;
@screen-lg-min          : @screen-lg;
@screen-lg-max          : (@screen-lg-min - 1);

// Grid system
@grid-columns           : 24;
@grid-gutter-width      : 0;

// Layout
@layout-body-background    : #ececec;
@layout-header-background  : @heading-color;
@layout-header-height      : 64px;
@layout-header-padding     : 0 50px;
@layout-footer-padding     : 24px 50px;
@layout-sider-background   : @heading-color;
@layout-content-margin     : 24px;
@layout-trigger-height     : 48px;

// z-index list
@zindex-affix           : 10;
@zindex-back-top        : 10;
@zindex-modal-mask      : 1000;
@zindex-modal           : 1000;
@zindex-notification    : 1010;
@zindex-message         : 1010;
@zindex-popover         : 1030;
@zindex-picker          : 1050;
@zindex-dropdown        : 1050;
@zindex-tooltip         : 1060;

// Animation
@animation-duration-slow: .3s; // Modal
@animation-duration-base: .2s;
@animation-duration-fast: .1s; // Tooltip

// Form
// ---
@label-required-color        : @highlight-color;
@label-color                 : @text-color;
@form-item-margin-bottom     : 24px;

// Input
// ---
@input-height-base           : 28px;
@input-height-lg             : 32px;
@input-height-sm             : 22px;
@input-padding-horizontal    : 7px;
@input-padding-vertical-base : 4px;
@input-padding-vertical-sm   : 1px;
@input-padding-vertical-lg   : 6px;
@input-placeholder-color     : #ccc;
@input-color                 : @text-color;
@input-border-color          : @border-color-base;
@input-bg                    : #fff;
@input-hover-border-color    : @primary-color;
@input-disabled-bg           : @background-color-base;

// Tooltip
// ---
//* Tooltip max width
@tooltip-max-width: 250px;
//** Tooltip text color
@tooltip-color: #fff;
//** Tooltip background color
@tooltip-bg: rgba(64, 64, 64, .85);
//** Tooltip arrow width
@tooltip-arrow-width: 5px;
//** Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1 + 4;
//** Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;



// Popover
// ---
//** Popover body background color
@popover-bg: #fff;
//** Popover maximum width
@popover-min-width: 177px;
//** Popover arrow width
@popover-arrow-width: 4px;
//** Popover arrow color
@popover-arrow-color: @popover-bg;
//** Popover outer arrow width
@popover-arrow-outer-width: (@popover-arrow-width + 1);
//** Popover outer arrow color
@popover-arrow-outer-color: fadeout(@border-color-base, 30%);

// Progress
// --
@process-default-color: @primary-color;





// CUSTOM STYLES
// ===================== 

h1, h2, h3 {
    font-family: 'Bariol_Bold';
    -webkit-font-smoothing: antialiased;
    -webkit-margin-after: 0px;
    -webkit-margin-before: 10px;
    -webkit-margin-end: 0px;
    -webkit-margin-start: 0px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}



p {
    font-family: 'Bariol_Bold';
    -webkit-font-smoothing: antialiased;
    -webkit-margin-after: 10px;
    -webkit-margin-before: 5px;
    -webkit-margin-end: 0px;
    -webkit-margin-start: 0px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


.ant-menu-item {
    font-weight: 500;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}



.landing-menu {
    .ant-menu-item {
        color: #f1beba;
    }

    li.ant-menu-item-selected {
        color: #fff;
        border-bottom: 2px solid #fff;
    }   
}

.ant-timeline-item-head-custom {
    background: #fafafa !important; 
}

.ant-timeline-item-head {
    background: #fafafa !important; 
}


ul.ant-menu-horizontal {
    border-bottom: none;
}


#search-box {
    height: 45px !important;    
    border-radius: 5px !important;
    border-bottom-right-radius: 0px !important;
    border-top-right-radius: 0px !important;
    border: none !important;
    padding-right: 35px !important;
    &:focus {
        outline: 0
    }

}

#search-box-results {
    #search-box;
    border: 2px solid #efefef !important;
}

.ant-input:focus {
    border-color: none  !important; 
    outline: 0  !important; 
    box-shadow: none  !important;   
}

.rc-progress-circle-path {
    stroke: @primary-color !important;
}


.ant-menu-item {
    font-family: 'Bariol_Bold';
}







.cant-find-form {
    input {
        height: 50px !important;
        border-radius: 3px !important;
        border: 2px solid #efefef !important;
        &:focus {
            outline: 0
        }
    }
}

#app-navigation {
    .ant-menu-horizontal > .ant-menu-item:hover, .ant-menu-horizontal > .ant-menu-submenu:hover {
        border-bottom: 2px solid transparent !important;
        color: @primary-color !important;
    }
}

.ant-btn {
    font-family: 'Bariol_Bold';
}

.vendor-title {
    font-family: 'Bariol_Light';
    margin-top: 20px;
    font-size: 28px;
}

a {
  text-decoration: none;
}

#react-root {
  minHeight: 100vh;
}

html, body {
  //background: #FAFAFA !important;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

body {
    overflow-x: hidden;
}