Как удалить нижнюю ширину границы в модальном заголовке Ant Design

Я создаю веб-приложение с помощью Ant Design Vue.

Хотелось бы узнать, как убрать bottom-width в шапке <a-modal>.

Это скриншот того, что я хотел бы сделать.

введите здесь описание изображения

Это мой код.

<template>
  <a-modal width="1000px" title="demo">
    Hi, Modal
  </a-modal>
</template>

<script>
:

</script>

<style lang="less" scoped>
.ant-modal-header {
  border-bottom-width: 0;
}
</style>

Я знаю, что класс ant-modal-header определяет border-bottom-width в Chrome Developer Tool.

Итак, я определил новый ant-modal-header в <style lang="less" scoped> для перезаписи дизайна, но почему-то это не работает.


vue.js antd
person Satoru Kikuchi    schedule 03.06.2020    source источник
comment
Используйте инструменты разработчика вашего браузера, чтобы определить, почему ваш CSS не работает. Обычно есть что-то с более конкретным селектором, переопределяющим ваши стили. Вы просто должны сделать свой селектор более конкретным   -  person Phil    schedule 03.06.2020
comment
Что произойдет, если вы попытаетесь перезаписать его в тегах не scoped стиля <style lang="less">? Он перезаписывает дизайн, попробуйте добавить к нему !important, это что-то делает?   -  person Jakub A Suplicki    schedule 03.06.2020
comment
@JakubASuplicki, во всяком случае, использование scoped сделает правило более конкретным, поэтому я бы рекомендовал оставить это в   -  person Phil    schedule 03.06.2020
comment
@Phil Я просто помню, что у меня возникла проблема с чем-то похожим при использовании одного из datepickers. Перезапись стилей внутри тегов scoped просто ничего не дала. Однако без тегов scoped он работал нормально. Интересно, в чем может быть причина этого.   -  person Jakub A Suplicki    schedule 03.06.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете использовать wrapClassName prop, чтобы дать класс этому конкретному модальному контейнеру, и как только вы дадите имя класса контейнеру, вы можете настроить его таргетинг, но стиль с областью видимости здесь не будет работать, потому что классы назначены в вашем текущем компоненте

так что что-то вроде этого должно работать.

<template>
  <a-modal width="1000px" wrap-class-name="my-special-modal" title="demo">
    Hi, Modal
  </a-modal>
</template>

<script>
:

</script>

<style lang="less">
.my-special-modal {
  .ant-modal-header {
    border-bottom-width: 0;
  }
}
</style>

person Sagar Rabadiya    schedule 03.06.2020
comment
Спасибо. Я хотел бы знать, как применить стиль, не удаляя область видимости в теге стиля. - person Satoru Kikuchi; 03.06.2020