Css React jsx样式标记未应用于函数返回的标记

我试图将样式应用于从函数内的for循环生成的标记。问题是标记中的样式不适用于这些生成的标记。可能是因为它们是在应用样式之后生成的？我不确定。下面是一个例子：

generateTags = (size) => {
    let tags = []
    for (var i = 0; i < size; i++) {
        tags.push(<img className="image-tag" src={this.state.imagePath} alt="image" key={Math.random() * Math.floor(100000)}/>)
    }
    return tags
}

render() {
    return (
        <div className="main">
            <div className="left-container">
                {this.generateTags(10)}
            </div>
        <style jsx> {`
            .main { <-- This is properly applied
                position: relative;
                width: 100%;
                height: 100%;
            }
            .image-tag { <-- This doesn't work
                position: absolute;
                width: 50px;
            }
        `} </style>
        </div>
    )
}

宽度：50px不应用于图像，我放置的任何内容都不会产生任何差异。但当我在标签中添加样式时，如下所示：

<img className="image-tag" style={{width: "50px"}} src={this.state.imagePath} alt="image" key={Math.random() * Math.floor(100000)}/>

---

然后正确应用样式。这是否意味着如果元素是从函数返回的，则样式标记中不能包含css？

看起来您正在使用。样式化JSX的原则之一是CSS是特定于组件的。由于标记是在定义样式的渲染函数之外创建的，因此不会应用标记

在本例中，我建议使用GenerateTags React组件，而不是函数。这样，您可以根据需要生成标记，并应用特定于组件的样式，如下所示：

---

看起来您正在使用。样式化JSX的原则之一是CSS是特定于组件的。由于标记是在定义样式的渲染函数之外创建的，因此不会应用标记

在本例中，我建议使用GenerateTags React组件，而不是函数。这样，您可以根据需要生成标记，并应用特定于组件的样式，如下所示：

---

你能确认样式标签和它的内容确实在输出页面上正确呈现吗？为什么不把样式内联到主div和img中呢tags@Sujit.Warrier我发现将样式以其通常的格式很好地嵌套在文件末尾更具可读性。样式标记还确保样式不会应用于其他组件中存在的相同类名。@NikosM。仅当样式内嵌在标记本身中时，才会应用样式。我立刻注意到一个机会。当样式位于jsx样式标记内时，它没有效果。你能确认样式标签及其内容确实在输出页面上正确呈现吗？为什么不将样式内联到主div和imgtags@Sujit.Warrier我发现将样式以其通常的格式很好地嵌套在文件末尾更具可读性。样式标记还确保样式不会应用于其他组件中存在的相同类名。@NikosM。仅当样式内嵌在标记本身中时，才会应用样式。我立刻注意到一个机会。当样式在jsx样式标记中时，它没有效果。我已经忘记了全局样式。看起来这是我尝试做的最好的修复方法，效果很好。谢谢我已经忘记了全球风格。看起来这是我尝试做的最好的修复方法，效果很好。谢谢

GenerateTags = (props) => {
    const {size} = props

    let tags = []

    for (var i = 0; i < size; i++) {
        tags.push(i)
    }

    return(
        <>
            {tags.map((tag, index) => (
                <img className="image-tag" src={this.state.imagePath} alt="image" key={Math.random() * Math.floor(100000)}/>
            ))}

            <style jsx>{`
                // This will now work as it is in the same scope as the component
                .image-tag {
                    position: absolute;
                    width: 50px;
                }
            `}</style>
        </>
    )

    return tags
}

render() {
    return (
        <div className="main">
            <div className="left-container">
                <GenerateTags size={10} />
            </div>
        <style jsx> {`
            .main { <-- This is properly applied
                position: relative;
                width: 100%;
                height: 100%;
            }
        `} </style>
        </div>
    )
}

<style jsx global>
  ...
</style>