下一个 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

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

这行得通。

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