下一个 JS 返回的元素不适用 CSS

Question

似乎如果我为 return 关联了 class 名称的 dom 元素创建一个函数，则不会应用本地样式，例如；

export default function thing(){
    const elem = function(){
        return (<div className="myCss">Hello</div>)
    }
    
    return(
        <>
            { elem() }
            <style jsx>{` .myCss{ color:#f00 } `}</style>
        </>

    )    
}

我的期望是 elem() return 一个元素将继承与 .myCss class 关联的样式。但它没有：/

Answer 1

通过 default styled-jsx 转换样式名称，因此您的示例生成动态样式，例如：.mycss-123 - 如果您希望 .myCss 完整无缺，请添加 global - 此外，您的模板字符串包含空格。

这有效。

<style jsx global>{`.myCss{ color:red }`}</style>

下一个 JS 返回的元素不适用 CSS

Next JS Returned Element Does Not Apply CSS

css

reactjs

next.js

styled-jsx