我想在 Emotion/styled 组件中重用某些 CSS 属性

Question

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" 两次我该如何实现？

Answer 1

使用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 了解更多信息。

Answer 2

您可以定义主样式并在需要时更改覆盖新样式。

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",
   }
}`

我想在 Emotion/styled 组件中重用某些 CSS 属性

I want to reuse certain CSS properties in Emotion/styled component

css

properties

emotion

reactjs

styled-components