Could you tell me how to override the modification of the default style of the element-ui component?

Hello, seniors. When I first tried to use the ele-ui component today, I found that the default style could not be modified. What"s going on?

for example, if I define this, I want to change the color of that commodity name

Why do I automatically generate a cell class, and then I can change the style of this cell class, but how do I know to change this class? Do all el tags automatically generate class names?
look forward to the elder"s advice!

Css vue.js element-ui front-end

Mar.10,2021

if you just want to reset the append (rear slot) style of el-autocomplete, the html code is as follows:

 <div class="app-header-search">
    <el-autocomplete
        v-model="search"
        placeholder="">
        <div slot="append">
            <button type="button"></button>
        </div>
    </el-autocomplete>
</div>

highlight: if you are a single-page application, it is recommended to create a separate file that rewrites the el style, such as override-element-ui.css, and then import

into main.js.

import 'css/override-element-ui.css';

then find the style referenced by the element to be overridden through F12 in the browser. The code for
override-element-ui.css is as follows:

.app-header-search {
    
    .el-input-group__append {
        border: 1px solid red;
        // 
    }
}

The

el tag is a component. When rendering, the fixed el tag will generate nesting of tags with the same class name. If you need to change the individual style, you want to set the class name such as "productName" to the el tag, and find the tag corresponding to the structure under the class name, such as .productName .cell tag. To avoid setting the .cell tag style to cause global conflicts of all corresponding el tags

excuse me how to solve this problem, I also encountered the same problem. When I modified the style, I wrote the style level by level against the structure of the page in developer mode. The view style was also applied, and the maximum weight was added, but it did not take effect. Thank you for your advice. Thank you

Previous: Match two comments and the content between them, how to write the rule?

Next: How does VSCode import the dependency module (ts) uniformly?