使用样式-jsx，我如何使用储存在变量的jsx样式？
我使用一个变量来有条件地显示不同的JSX，它没有使用在其父函数中定义的样式。我怎样才能做到这一点？
您可以在这里看到一个演示:https://codesandbox.io/s/styled-jsx-example-e6tf6
import React from 'react'
function StyledJsxTest({ isLoggedIn, areButtonsVisible }) {
function renderButtons() {
const buttons = isLoggedIn ? (
<a className="button" href="/dashboard">Dashboard</a>
) : (
<>
<a className="button" href="/signIn">Log In</a>
</>
)
return (
<div>
<div>
<a className="button" href="/dashboard">Test</a>
{buttons}
</div>
<style jsx>{`
.button {
background-color: blue;
color: white;
padding: 20px;
margin: 10px;
}
`}
</style>
</div>
)
}
return (
<div>
<h1>This is a headline</h1>
{renderButtons()}
</div>
)
}
export default StyledJsxTest
这段代码中的按钮没有得到js .button 规
则。我怎样才能让它们发挥作用？
const buttons = isLoggedIn ? (
<a className="button" href="/dashboard">Dashboard</a>
) : (
<>
<a className="button" href="/signIn">Log In</a>
</>
)
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
在你提供的代码示例中，<Dashboard> 和 <Login> 组件没有直接应用到你在 styled-jsx 中定义的 .button 样式，因为它们可能不是作为按钮元素（如 <button>）直接渲染的，或者没有通过 className 传递样式。为了使这些组件能够应用 .button 样式，你需要确保以下几点：
-
如果
<Dashboard>和<Login>是自定义组件：你需要在这些组件内部接受并应用className属性，然后将.button样式通过 props 传递给它们。修改你的组件定义，例如对于
<Dashboard>和<Login>，确保它们能接收className:function Dashboard({ className }) { return <button className={className}>Dashboard</button>; } function Login({ className }) { return ( <> <button className={className}>Log In</button> <button className={className}>Sign Up</button> </> ); } -
在
renderButtons函数中应用样式：当渲染这些组件时，通过className将.button的样式传入。修改
renderButtons函数如下：function renderButtons() { const buttonClass = 'button'; // 定义样式类名 const buttons = isLoggedIn ? ( <Dashboard className={buttonClass} /> ) : ( <> <button className={buttonClass}>Log In</button> <button className={buttonClass}>Sign Up</button> </> ); return buttons; }
这样，无论条件如何，渲染出的按钮都将应用 .button 样式。请记得在实际组件中实现相应的修改以确保这一点。
