reactjs - 输出样式组件的功能

Question

我在这里有一个堆栈闪电战

它是一个带有样式组件的超级简单的反应应用程序。

是否有可能有一个函数来输出样式组件，我可以传递值，比如我的尝试被注释掉。

我想起诉Blockstyled-component 但每次都改变颜色

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import styled from 'styled-components'

export const Block = styled.div`
  width: 100px;
  height: 100px;
  background: red;
`

const createBlock = (col) => {
  return(
    Block = styled.div`
      width: 100px;
      height: 100px;
      background: col;
    `
  )
}

const App = () => {

  return (
    <div>
      <Block/>
      {createBlock(red)}
    </div>
  );
}

render(<App />, document.getElementById('root'));

标签： reactjsstyled-components

Answer 1

我想你正在寻找这样的东西：

const createBlock = (col) => {
  return styled.div`
      width: 100px;
      height: 100px;
      background: ${col};
    `
}

const App = () => {
  const StyledBlock = createBlock('red');

  return (
    <StyledBlock>
      <p>Some content</p>
    </StyledBlock>
  );
}