I am using Vue.js and Ant Design of Vue , I am trying to override the styles of the following component:
<template>
<a-input placeholder="Basic usage" />
</template>
I have searched the documentation but I can't find it, I have managed to overwrite the styles using !important in css but I understand that it is a bad practice
Is there any other way to override component styles?
<style>
input {
background: #e4e6eb !important;
border-radius: 20px !important;
}
.ant-input {
border-color: #e4e6eb !important;
border: none !important;
}
.ant-input:focus {
box-shadow: none !important;
}
::placeholder {
color: rgb(34, 34, 34) !important;
opacity: 1 !important;
}
</style>
Consider the following:
The specificity in CSS helps us to identify the level of priority that a selector implies for the browser and in this way give it one style or another.
In that order of ideas we have at the highest level:
On the other hand, you are having to apply important because the CSS although it is cascading, for the inputs you use a type selector which is the one with the least weight.
So for this case, you could
Apply a type selector and also add to this same selector add an attribute selector like this:
Which will give you more specificity and in theory should override the old style and apply the new one.
For the case where you have a class, we can apply:
A type selector and also add a class selector to it which would make it more specific over just selecting via its class, like this:
REFERENCE SOURCES