Element-UI : font-family differencies between components
I was facing a similar issue, if you are using webpack, one of the options is to add the following code when importing element UI:
import 'element-ui/lib/theme-chalk/reset.css'You will find the original answer here:
https://forum.vuejs.org/t/elementui-styling-is-not-applied-to-new-webpack-element-ui-project/26194/9
In my scenario I wanted to make a global change to the font-family.
On top of importing the above mentioned reset.css, as you mentioned some components i.e. <input>s, <button>s were still not behaving and inheriting the declared font-family (applied to say the <body>) and were falling back to browser defaults.
Digging around the element-ui GitHub issues, I found the following snippet which forces these missing elements to inherit their font-family, so a single font-family definition on the body will propagate to all components. I insert this right after my body font-family definition.
button, input, select, textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }Taken from : https://github.com/ElemeFE/element/issues/150#issuecomment-249750366