内联样式反应元素宽度
inline style react element width
我正在尝试创建一个具有设定宽度的圆形 div。它工作正常,但是一旦我添加的 divs 多于屏幕上适合的内容,圆的宽度就会被覆盖。父容器设置了 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=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;}
这不是反应或内联样式问题。从父容器中移除 属性 display: inline-flex
并将其添加到圆形 div
检查这个:working example
我通过在 Avatar 组件中设置 style.minWidth =
${width}px|| '32px';
解决了这个问题。
我正在尝试创建一个具有设定宽度的圆形 div。它工作正常,但是一旦我添加的 divs 多于屏幕上适合的内容,圆的宽度就会被覆盖。父容器设置了 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=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;}
这不是反应或内联样式问题。从父容器中移除 属性 display: inline-flex
并将其添加到圆形 div
检查这个:working example
我通过在 Avatar 组件中设置 style.minWidth =
${width}px|| '32px';
解决了这个问题。