import styled from '@emotion/styled';
type ColorProps = {
Coloured: boolean,
}
const BoxStyled = styled.div`
${(props:ColorProps) =>
props.Coloured ? {
background: "#304f8f",
border: "1.85px solid #304f8f",
color: "white",
width: "4rem",
height: "2.5rem",
padding:"0 11px"
} :
{
border: "1.98px solid #2c8090",
width: "4rem",
height: "2.5rem",
padding:"0 11px"
}
}`
在 BoxStyled 中,我不想写两次 width: "4rem"、height: "2.5rem"、padding:"0 11px"我该如何实现这一点?
最佳答案
使用css
制作样式变量。
import { css } from 'styled-components'
const reuse = css`
width: 4rem;
height: 2.5rem;
padding: 0 11px;
`
const StyleA = styled.div`
background-color: black;
${reuse}
`
const StyleB = styled.div`
background-color: red;
${reuse}
`
检查this了解更多信息。
关于css - 我想在 Emotion/styled 组件中重用某些 CSS 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70648183/