时间戳

首页 > 解决方案 > CSS3、Angular 8、Algolia - 自定义样式表不覆盖小部件样式

css - CSS3、Angular 8、Algolia - 自定义样式表不覆盖小部件样式

问题描述

我有一个由 Algolia InstantSearch v3.35.1 小部件定义的输入字段ais-search-box，它不响应我的自定义 .css 文件中的覆盖。

我在下面显示相关信息。使用浏览器调试器查看输入字段元素，看起来要覆盖的正确小部件样式是input.ais-SearchBox-input. 样式覆盖也显示正确，已在其他区域成功完成。

关于我的错误有什么想法吗？

谢谢，鲍勃

从浏览器调试器中截取 在此处输入图像描述

小部件样式

.ais-SearchBox-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 0.3rem 1.7rem;
  width: 100%;
  position: relative;
  background-color: #fff;
  border: 1px solid #c4c8d8;
  border-radius: 5px; }
  .ais-SearchBox-input::-webkit-input-placeholder {
    color: #a5aed1; }
  .ais-SearchBox-input::-moz-placeholder {
    color: #a5aed1; }
  .ais-SearchBox-input:-ms-input-placeholder {
    color: #a5aed1; }
  .ais-SearchBox-input:-moz-placeholder {
    color: #a5aed1; }

覆盖样式 - tmd_basic.css

.mySearchField .input.ais-SearchBox-input{
  font-size: 14px;
  font-weight: 600;
  padding-left: 5px;
  padding-bottom: 10px;
  background-color: red;
}

search.component.ts

import {Component, OnInit} from '@angular/core';
import {FadeInTop} from "../../shared/animations/fade-in-top.decorator";
import {ActivatedRoute} from '@angular/router';
import algoliasearch from 'algoliasearch/lite';

@FadeInTop()
@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['../../../assets/css/tmd_basic.css']
})


export class SearchComponent implements OnInit {

search.component.html

    <ais-instantsearch [config]="config">
        <ais-search-box placeholder="Let's find something on TMD..." class="mySearchField"></ais-search-box>
    </ais-instantsearch>

标签： cssangularalgolia

解决方案

试试下面的 CSS。

mySearchField .ais-SearchBox-input{
      font-size: 14px !important;
      font-weight: 600 !important;
      padding-left: 5px !important;
      padding-bottom: 10px !important;
      background-color: red !important;
    }

推荐阅读