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" 兩次我該如何實作？
uj5u.com熱心網友回復：
使用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}
`
檢查此以獲取更多資訊。
uj5u.com熱心網友回復：
import styled from '@emotion/styled';
type ColorProps = {
Coloured: boolean,
}
const BoxStyled = styled.div`
border: "1.98px solid #2c8090",
width: "4rem",
height: "2.5rem",
padding:"0 11px"
${(props:ColorProps) =>
props.Coloured && {
background: "#304f8f",
border: "1.85px solid #304f8f",
color: "white",
}
}`
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/407198.html
標籤：