自定义 Ant Design 主题的说明如下：
https://ant.design/docs/react/customize-theme
这将如何与 Meteor React 1.4+ 一起工作？“覆盖更少的变量（替代方式）”是正确的使用方法吗？LESS 文件会去哪里以及如何在 React 中访问它？
问问题
3921 次
3 回答
4
与arcom 的答案类似，在.babelrc 上有更多详细信息。这使用 antd 2.7.1 工作：
在 .babelrc
{
"plugins": [
"transform-class-properties",
"babel-root-slash-import"
]
}
安装有
meteor npm i --save babel-plugin-transform-class-properties babel-root-slash-import
在 theme.less 中，antd 变量是可访问的，并且新值会覆盖默认值
@import '{}/node_modules/antd/dist/antd.less';
// Color
@primary-color : @green-6;
于 2017-02-18T10:06:42.873 回答
3
- 添加 less 包（对于流星）
- 在客户端添加一个 theme.less 文件
- 粘贴来自 ant 的默认 less 变量
- 根据需要定制
示例较少的文件：
@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;
}
于 2017-01-06T15:33:23.530 回答
1
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
于 2017-01-03T21:43:56.917 回答