css - 内联样式 react 元素宽度

Question

我正在尝试创建一个具有设定宽度的圆形 div。它工作正常但是一旦我添加了比屏幕上适合的更多的 div，圆的宽度就会被覆盖。父容器设置了 overflow: scroll 并且 div 是可滚动的。

这是我的头像组件代码

 const Avatar= ({contact, email, circle, width, margin, fontSize, fontWeight}) => {
  let style = {}

  if (width) {
    style.width = `${width}px` || '32px'
    style.height = `${width}px` || '32px'
    style.margin = `${margin}px` || '4px'
  }

  if (circle) {
    style.borderRadius = `${width/2}px` || '16px'
  }

  let displayName;


  if (contact && contact.avatar) {
    return (
      <img style={style}
        src={contact.avatar}
        title={contact.FN || contact.wyreId || email}
        alt={contact.FN || contact.wyreId || email}
      />
    )
  } ... removed code that sets displayname

  // default display
  style.color = '#fff';
  style.background = 'orange';
  style.lineHeight = style.height;
  style.textAlign = 'center';
  style.fontSize = fontSize;
  style.fontWeight = fontWeight;
  return (
    <div style={style}>
        {
          displayName || '?'
        }
      </div>
  )
}

Here is an image of the components working as intended. Here is an image of the components not working as intended.

当我使用开发工具检查时，这是两种情况下添加到 div 的样式。 style=宽度:32px；高度:32px；边距:4px；边界半径:16px；颜色:RGB(255、255、255)；背景:橙色；行高:32px；文本对齐:居中；字体大小:16px；字体粗细:粗体；

知道哪里出了问题

为了以防万一，这里是在父 div 上设置的样式。

.horizontalList {
list-style-type: none;
margin-top: -20px;
margin-left: 2%;
margin-right: 2%;
padding-bottom: 10px;
display: inline-flex;
justify-content: center;
height: 60px;
overflow: scroll;}

Answer 1

我能够通过设置 style.minWidth =${width}px|| 来解决这个问题'32px'; 在 Avatar 组件中。