Question

说我想在一个对象中具有相同的代码块，并附加以下内容：

const styles = {
  styleA: `
    background-color: red;
    color: silver;
  `,
  styleB: `
    background-color: green;
    color: white;
  `,
  styleC: `
    background-color: red;
    color: silver;
    font-size: 16px;
  `
};

如您所见，styleA和styleC相似，除了styleC的字体大小外。我该如何用react（es6）重写它，以便

styleA = styleC + 'font-size: 16px';吗？

还是有更好的方法完全做到这一点？

Answer 1

您可以使用styled-components中的css helper来帮助从其他现成的组件创建样式和混合。

例如，在您的情况下：

const styleA = css`
  background-color: red;
  color: silver;
`;

const styleB = css`
  background-color: yellow;
`;

const styles = {
  styleC: css`
    ${styleA}
    ${styleB}
    font-size: 32px;
  `
};

const MainHeading = styled.h2`
  ${styles.styleC}
`;

Answer 2

你可以有这样的东西。

const createStyle = (bgColor, color, fontSize) => {

  return (
    `
    background-color: ${bgColor};
    color: ${color};
    ${fontSize ? `font-size: ${fontSize}` : null}; //if there is fontSize, return it
    `
  );
}

因此：

const styles = {
  styleA: createStyle('red', 'silver'),
  styleB: createStyle('red', 'silver', '16px')
};

在反应中重用const对象

2 个答案: