Генерация миниатюры в виде кнопки в реакции

Question

Мне было интересно, почему моя кнопка создает рамку вокруг миниатюры, даже если я стилизовал ее так, чтобы она вообще не имела границ?

css style:

.modalButton: {
  padding: ['0rem', '0rem'];
  backgroundColor: '#568db2';
  border: 0;
  borderRadius: '0rem';
  fontSize: '0rem';
  color: '#fff';
  cursor: 'pointer';
  marginBottom: '0rem';
}

code:

<button
  type="button"
  onClick={() => this.setState({ isOpen: true })}
  className="modalButton"
>
  <Thumbnail src={snapshot} />
</button>

, хотя он должен генерировать картинку без каких-либо границ и должен выглядеть как обычный эскиз, он фактически дает мне это при рендеринге:

изображение

есть ли проблема с моим кодом?

РЕДАКТИРОВАТЬ: проверенное изображение

, когда я проверяю изображение, которое он мне дает

<div> == $0

стиль

стиль

, и это стили, которые, как он говорит, имеют.Есть ли способ изменить его?

РЕДАКТИРОВАТЬ

С новой строкой кода

поле ввода

окно изображения

Answer 1

Спасибо за изображения. Вот что происходит. Оказывается, у вашей кнопки (Изображение) есть эти свойства: border-color, border-style, border-width, наследуемый вашим эскизом, и добавьте приведенный ниже класс в ваш стиль.Надеюсь, это исправится,

.thumbnail{
    border-color:initial !important;
    border-style:initial !important;
    border-width:initial !important;
    padding: 0px !important;
}

Answer 2

Самый простой способ решить эту проблему - посмотреть, какие стили применяются к элементу с помощью инструментов разработчика в популярном браузере.

Некоторые замечания, которые следует учитывать при работе с границами:

1. Применяемые параметры размера блока: Свойство размера блока CSS
2. Свойство контура CSS: Свойство контура CSS

Оба из них могут иметь неожиданные и потенциально разочаровывающие последствия для неосторожного разработчика;

Вот цитата из W3Schools, в которой говорится о путанице / границе:

Схема отличается от границ!В отличие от границы, контур рисуется вне границы элемента и может перекрывать другое содержимое.Кроме того, контур НЕ является частью размеров элемента;ширина и высота элемента не зависят от ширины контура.