Оптимизация CSS-метода React Styled Component

Question

Что оптимизировано и почему?

Я слышал, что метод css от Styled-component довольно дорогой, но мне интересно, дороже ли несколько вложенных ${(prop) => {}}, чем один fn? с использованием метода css, используемого внутри.

Подход 1

const Foo = styled.div`
  border-radius: 50%;
  display: flex;
  width: ${(props) => props.size};
  height: ${(props) => props.size};
  color: ${(props) => props.bgColor};
  background-color: ${(props) => props.bgColor};
`;

против

Подход 2

const Bar = styled.div`
  border-radius: 50%;
  display: flex;
  ${(props) => {
    return css`
      width: ${props.size};
      height: ${props.size};
      color: ${props.bgColor};
      background-color: ${props.bgColor};
    `;
  }}
`;

Answer 1

Разница в производительности должна быть незначительной. Единственная оптимизация Styled Components будет выполнена, если ваши стили будут статическими (без интерполяции).

Обратите внимание, что styled.div или любой другой из методов Styled CSS уже выполняют ту же работу, что и css. И эти методы принимают функции в качестве аргументов (вместо интерполированных строк). Таким образом, вы можете сделать еще один шаг вперед и сделать это:

const Baz = styled.div((props) => css`
  border-radius: 50%;
  display: flex;
  width: ${props.size};
  height: ${props.size};
  color: ${props.bgColor};
  background-color: ${props.bgColor};
`);