search

didi / mand-mobile

💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
https://didi.github.io/mand-mobile
Apache License 2.0
3.46k stars 772 forks source link

如何修改某个组件中某个部分的颜色 #400

Closed bart1989 closed 5 years ago

bart1989 commented 5 years ago

以md-stepper为例，我希望修改加号的背景色，如何修改？

bart1989 commented 5 years ago 
<md-stepper class="custom-stepper" slot="right" v-model="value" :step="2" :min="2" is-integer />

.md-stepper{ &.custom-stepper{ .md-stepper-button{position:relative;width:7.2vw;height:6.66667vw;background-color:#000;border-radius:2px} } } 我这么写的，没有效果。

supergaojian commented 5 years ago

1、如果您使用的是mand-mobile1.x可以使用我们的调色板 2、如果你使用的是mand-mobile2.x可以根据我们的样式变量自定义 3、根据您的代码请确定是否使用了scope

bart1989 commented 5 years ago

1、如果您使用的是mand-mobile1.x可以使用我们的调色板 2、如果你使用的是mand-mobile2.x可以根据我们的样式变量自定义 3、根据您的代码请确定是否使用了scope

我使用的是2.x，按照文档，我创建了theme.custom.styl文件，内容为 @import '~mand-mobile/components/_style/mixin/util' // 1.x //@import '~mand-mobile/components/_style/mixin/theme' // 2.x @import '~mand-mobile/components/_style/mixin/theme.components' @import '~mand-mobile/components/_style/mixin/theme.basic' @import '~nib/lib/nib/vendor' @import '~nib/lib/nib/gradients' color-primary = #00AF3B stepper-width-input = 12px

我在babelrc中添加了 "plugins": [ "transform-vue-jsx", "transform-runtime", [ "import", { "libraryName": "mand-mobile", "libraryDirectory": "lib" } ] ]

我在webpack.base.conf中添加了 { test: /.styl$/, use: [ 'css-loader', { loader: 'stylus-loader', options: { import:['theme.custom.styl'] } } ] }, { test:/mand-mobile.*.css$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'postcss-loader', options: { plugins: [ require('postcss-pxtorem')({ rootValue: 100, propWhiteList: [] }) ] } }, ],

无效，还需要配置什么吗？

bart1989 commented 5 years ago

代码中

xxyan0205 commented 5 years ago
  1. 关于最上面提到的修复加减号颜色，他们是:before, :after伪类，因为选择器不对，所以未生效。
  2. 下面自定义主题配置中，stylus-loader中import theme.custom.styl的路径大概率是不对的，需要按照工程里真实的路径引用。