css - 下一个 JS 返回的元素不应用 CSS

Question

似乎如果我创建一个函数来返回与 className 关联的 dom 元素，则不会应用本地样式，例如；

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

    )    
}

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

Answer 1

默认情况下，styled-jsx 会转换样式名称，因此您的示例会生成动态样式，例如：.mycss-123- 如果您想.myCss保持原样，请添加global- 此外，您的模板字符串包含空格。

这行得通。

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