Повторно использовать const объект в реакции

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.Как я могу переписать это с реакцией (es6), чтобы

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

Или есть ли лучший способ сделать это в целом?

Answer 1

Вы можете использовать css помощник из styled-components, чтобы помочь создавать стили и миксины из других готовых компонентов.

Например, в вашем случае:

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')
};