代码之家  ›  专栏  ›  技术社区  ›  Joshua Fermin

内联样式反应元素宽度

  •  1
  • Joshua Fermin  · 技术社区  · 7 年前

    我正在尝试创建一个具有设置宽度的圆形div。它工作得很好,但一旦我添加的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.

    当我使用dev工具进行检查时,这是为这两种情况添加到div的样式。 style=width: 32px; height: 32px; margin: 4px; border-radius: 16px; color: rgb(255, 255, 255); background: orange; line-height: 32px; text-align: center; font-size: 16px; font-weight: bold;

    知道会出什么问题吗

    这里还有在父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;}
    
    2 回复  |  直到 7 年前
        1
  •  2
  •   Joshua Fermin    7 年前

    我可以通过设置 style.minWidth = ${宽度}px || '32px'; 在化身组件中。

        2
  •  1
  •   IP_    7 年前

    这不是反应或内联样式问题。删除属性 display: inline-flex 从父容器并将其添加到循环div

    检查此项: working example