时间戳

首页 > 解决方案 > 在reactjs中生成缩略图作为按钮

javascript - 在reactjs中生成缩略图作为按钮

问题描述

我想知道为什么我的按钮在我的缩略图周围创建了一个边框，即使我设置了它的样式以便它根本没有边框？

CSS样式：

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

代码：

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

即使它应该生成没有任何边框的图片并且应该看起来就像一个普通的缩略图，它实际上在渲染时给了我这个：

渲染图片

我的代码有问题吗？

编辑： 检查图像

当我检查它给我的图像时

<div> == $0

造型

造型

这就是它所说的风格。有没有办法改变它？

编辑

使用新的代码行

填充框

图像框

标签： javascriptcssreactjsbutton

解决方案

解决此问题的最简单方法是使用流行浏览器中的开发人员工具查看元素应用了哪些样式。

处理边界时需要注意的一些事项：

  1. 应用的 box-sizing 设置：CSS Box-Sizing 属性
  2. CSS 大纲属性：CSS 大纲属性

对于粗心的开发人员来说，这两者都会产生令人惊讶且可能令人沮丧的影响；

以下是 W3Schools 的引述，解决了大纲/边界混淆：

轮廓与边界不同！与边框不同，轮廓绘制在元素边框之外，并且可能与其他内容重叠。此外，轮廓不是元素尺寸的一部分；元素的总宽度和高度不受轮廓宽度的影响。

推荐阅读