我正在尝试更改Clarity UI的数据网格过滤器下拉列表的位置,因为它们会降低我需要查看的信息 .

该位置采用内联样式,它允许我覆盖颜色,但位置不会改变 . 当我在开发人员工具样式面板中更改它时,它可以工作,但是当我尝试使用外部工作表覆盖它时 .

我也在寻找库生成这个div的地方但找不到它 . 任何帮助都会很棒,因为我想使用这个功能 .

Developer Tools Elements display

<div class="datagrid-filter ng-star-inserted" 
     style="position: absolute; top: 0px; bottom: 
            auto; left: 0px; right: auto; 
            transform: translateX(619.984px) translateY(329.172px);">

Developer Tools Styles display

代码--tag:value--表示删除线

element.style {
    position: absolute;
    --top: 0px--;
    bottom: auto;
    left: 0px;
    right: auto;
    transform: translateX(619.984px) translateY(329.172px);
}
.datagrid .datagrid-column .datagrid-filter, .datagrid .datagrid-head 
.datagrid-row-actions .datagrid-filter {
    --position: absolute--;
    --top: 100%--;
    --right: 0--;
    margin-top: .2rem;
    background: #fff;
    padding: .75rem;
    border: 1px solid #ccc;
    ---webkit-box-shadow: 0 1px 3px hsla(0,0%,45%,.25)--;
    box-shadow: 0 1px 3px hsla(0,0%,45%,.25);
    border-radius: .125rem;
    font-weight: 400;
    z-index: 1000;
}
.datagrid-filter {
    top: -120px !important;
    background-color: black !important;
}

My style usage

/deep/ .datagrid-filter {
    top: -120px !important;
    background-color:black !important;
}

我也试过/ deep / .datagrid-filter [style]无济于事 .

Visual example of dropdown

Drop down example