gpt4 book ai didi

javascript - 创建新组件并从 styled-component 继承样式

转载 作者:行者123 更新时间:2023-11-30 14:03:15 28 4
gpt4 key购买 nike

const Button = styled.button`
display: inline-block;
width: 300px;
background-color: black;
`

const ButtonHref = styled.a`
${Button}
`

所以我有两个样式组件。我想继承“按钮”样式但创建另一个标签。我使用 react 情绪。我该怎么做?

最佳答案

这里有几个选项,使用组合、样式组件或 Prop 。第二个选项可能是您想要的,但我也提供了另外两个选项。

<强>1。使用合成

const baseButton = css`
color: white;
background-color: black;
`

const fancyButton = css`
background-color: red;
`

render() {

return (
<div>
<button css={baseButton}></button>
<button css={[baseButton, fancyButton]}></button>
</div>
)
}

第二个按钮将具有 baseButtonspecialButton 样式。

或者...

const baseButton = css`
color: white;
background-color: black;
`

const fancyButton = css`
${baseButton};
background-color: red;
`

render() {
return (
<div>
<button css={baseButton}></button>
<button css={fancyButton}></button>
</div>
)
}

<强>2。使用样式化组件

const Button = styled.button`
color: white;
background-color: black;
`
const Fancy = styled(Button)`
background-color: red;
`

render() {
return (
<div>
<Button>Button</Button>
<Fancy>Fancy</Fancy>
</div>
)
}

这适用于任何接受 className 属性的组件,button 可以。

<强>3。使用 props

  const Button = styled.button`
color: white;
background-color: ${props => props.fancy ? 'red' : 'black'};
`

render() {
return (
<div>
<Button>Button</Button>
<Button fancy>Fancy</Button>
</div>
)
)

关于javascript - 创建新组件并从 styled-component 继承样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55916786/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com