Question

我试图返回此元素，但如果我在导入后尝试设置样式，则不会应用正确的样式。

Heading.js：

export default ({
  element = 'h1',
}) => new styled[element]`
  margin: 0 0 ${shevy[element].marginBottom};
  font-family: Plain, sans-serif;
  font-size: ${shevy[element].fontSize};
  line-height: ${shevy[element].lineHeight};
  text-transform: uppercase;
`()

SomeOtherComponent.js：

const LeadHeading = styled(Heading)`
  margin: 0 0 ${bs(3)};
  font-size: ${h4.fontSize};
  line-height: ${h4.lineHeight};
  color: red;
`

<LeadHeading>Yup</LeadHeading>

正确应用了颜色，但font-size，line-height和margin未正确应用。

Answer 1

我做了一些hacky，而我应该一直使用withComponent：https://www.styled-components.com/docs/basics#extending-styles。

结束了：

import styled from 'styled-components'
import shevy from 'common/shared/utils/shevy'

const Heading = styled.h1`
  font-family: Plain, sans-serif;
  text-transform: uppercase;
`
const extend = tag => `
  margin: 0 0 ${() => shevy[tag].marginBottom};
  font-size: ${() => shevy[tag].fontSize};
  line-height: ${() => shevy[tag].lineHeight};
`

Heading.h1 = Heading
Heading.h2 = Heading.withComponent('h2').extend(extend('h2'))
Heading.h3 = Heading.withComponent('h3').extend(extend('h3'))
Heading.h4 = Heading.withComponent('h4').extend(extend('h4'))
Heading.h5 = Heading.withComponent('h5').extend(extend('h5'))
Heading.h6 = Heading.withComponent('h6').extend(extend('h6'))

export default Heading

返回动态样式组件

1 个答案: