Стилизованные компоненты - почему положение опоры влияет на стиль?

Question

Я использую styled-компоненты для стилизации родительского и дочернего элемента в компоненте:

function StyledDemo({
  name,
  light,
  ...props
}) {
  return (
    <Parent {...props}>
      <Child>{name}</Child>
    </Parent>
  );
}

у меня есть light prop, который имеет значение true/false, но у меня возникла проблема со стилем элементов, основанным на значении этого свойства:

const Parent = styled.div`
  background-color: #000;
  width: 100%;

  ${props => props.light && `
    background-color: #ccc;
  `}
`;

Стилизация, кажется, работает, только когда я удаляю опору, передаваемую в функцию индивидуально.

Parent элемент использует правильный стиль на основе light значение опоры, когда:

function StyledDemo({ name, ...props })

Parent элемент НЕ использует правильную стилизацию на основе light значение пропеллера, когда:

function StyledDemo({ name, light, ...props })

Я могу заставить все это работать, установив опору на Parent а также Child компонент, но это не похоже, что это лучший способ:

return (
  <Parent {...props} light={light}>
    <Child light={light}>{name}</Child>
  </Parent>
);

Это правильный способ применения стилей к компонентам на основе реквизита, или есть проблема с моим подходом?

У меня есть демоверсия, если она поможет: https://www.webpackbin.com/bins/-Kfcsujw99cjU7ttqgTz

Answer 1

Это не связано с styled-components но по остальному параметру.

Когда вы выполняете оператор rest, любое свойство, которое вы "выбираете" по имени, не будет содержаться в ...rest переменная. Итак, когда вы делаете

const Button = ({ light, ...rest }) => ()

<Button light primary />

rest будет содержать только primary собственность, но не lightтеперь это его собственная переменная.

Если вы сделали

const Button = ({ ...rest }) => ()

<Button light primary />

вместо rest будет также содержать light,

Итак, в вашем примере, вы выбираете light от ...propsпоэтому, когда вы проходите {...props} на родителя это не содержит light больше так styled-components не знает, что существует! Либо вы используете свою первую версию, либо вам нужно вручную применить ее к каждому компоненту.

Смотрите MDN для получения дополнительной информации о параметре rest!