The font style/family is not standard between components. For example :
- input vs textarea
- datatable vs datatable page-size popper dropdown
- the notification messages
How can I fix this in "element-ui" way ? Thank you.
Element-UI Version : 2.4.6
Element-UI : font-family differencies between components
Viewed 8276
2 Answers
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
Related