ReSkin mdb components


Topic: ReSkin mdb components

digitalmanagerguru asked 5 years ago

Hi there guys,

since I'm still new developing with reactive frameworks and more new on vue, I wanted to know from other devs which are the best approach for when I want to restyle a component.

Let say I want to use mdbInput and mdbBtn and I want to style them differently. Right now I was styling them on each component that make use of them on the style scoped, but since I'll use in many other places, I need to a better structure for this. I was thinking on creating a customMdbInput and a customMdbBtn, but with this approach I would need to replicate all props, so I can receive on customs and pass to mdb ones. Do I've a better alternative for this?

Searching for a good way to only restyle a component. I could ofc add a global style that would make all this changes, or maybe better, making a css for the component changes and loading on the pages that uses the mdb components.

let me know your thoughts, thanks


Mikołaj Smoleński staff answered 5 years ago

Hi there,

I strongly recommend to use our SCSS styling editable option: https://mdbootstrap.com/docs/vue/getting-started/quick-start/#scss

With this installation mode you will be able to make changes directly in scss files (variables, mixins, etc.) and your changes will be applied in your app from scss.

Best regards


That's interesting. :)

I've already node-saas and sass-loader. Now I'm ready to move to next step.

But I need a little push here :P in practice if I wanted to change let say mdb-input, and change the active blue border to green:

.md-form input[type="text"]:not(.browser-default):focus:not([readonly])+label { color: #4285f4; // changing this color to green }

Where should I add the scss for this? On the .vue file where I am loading the component (between )?

And how can I know the scss variables that are being used?

Thank you in advance!


Mikołaj Smoleński staff answered 5 years ago

There are plenty of methods to change styling, depending what you want to achieve.

To make changes locally you can add the above line (.md-form input...) inside your component in section.

To make it global just remove scoped attribute.

But, for example if you want to update all primary colors inside your projects you will have to import scss files directly to your project (as I wrote in the first post). Then you will have to find primary variable inside scss directory and overwrite it. In this case you will have to do this in file scss/core/_colors.scss in line 619 ($primary-color).

Best regards


Right now I'm using the first two options you stated, but I'm looking for the last option to update all primary colors. I've find now the _colors at node_modules\mdbvue\lib\scss\core_colors.scss but I don't want to change directly node files. I wanted to have a custom.scss on my project where I could add the $primary, and make those customs overwrite the ones from mdb.

Best regards

PS: I saw that on node_modules\mdbvue we've the _custom-variables.scss, _custom-styles.scss, _custom-skin.scss. So I beleive I should be adding there, and those 3 files I assume will not get overwrite on future mdb updates?

So in the end I'll add this to my main.vue: @import '~mdbvue/lib/scss/_custom-skin.scss';


Mikołaj Smoleński staff answered 5 years ago

Again, while using automatic installation mode via console, the scss directory is being relocated to the root of your project (mdb dir). Then there is an option to update all scss files, exactly as you wrote above, without the risk of overwriting them after node_modules updates.

Best regards


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.1.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Win.10
  • Provided sample code: No
  • Provided link: No