Styled-components: Best practice for referencing other styled-components

[probablyup]

Could you document somewhere how styles that relate to another component should be handled?

For instance, say I have ComponentA and ComponentB. ComponentB has a style that if it comes after ComponentA it should add a right margin, e.g.

.component-a + .component-b {
    margin-right: 10px;
}

How would you do something like this with styled-components without having to add additional identifiers to the components themselves so they can be locked-onto via selectors?

[k15a]

This will be added in v2. Look at #142. Basically you're doing:

const A = styled.div``

const B = styled.div`
  ${B} + & {
    margin-right: 10px;
  }
`

[reanimatter]

Not sure how it is supposed to work with selectors like

.comp + .comp {
  margin-left: 10px;
}

the following setup

const Comp = props => {
  return <div className={props.className} />
};

const StyledComp = styled(Comp)`
  width: 16px;
  height: 16px;
  background: red;
  display: inline-block;
  ${StyledComp} + & {
    margin-left: 8px;
  }
`;

produces

/* sc-component-id: sc-htpNat */
.sc-htpNat {} .flaKOJ{width:16px;height:16px;background:red;display:inline-block;} + .flaKOJ{margin-left:8px;}

which obviously doesn't work. What am i missing?

[probablyup]

Try & + &
On Wed, May 16, 2018 at 5:37 AM Maxim Lichmanov [e-mail]
wrote:

Not sure how it is supposed to work with selectors like

.comp + .comp {
margin-left: 10px;
}

the following setup

const Comp = props => {
return

};
const StyledComp = styled(Comp)width: 16px; height: 16px; background: red; display: inline-block; ${StyledComp} + & { margin-left: 8px; };

produces

/* sc-component-id: sc-htpNat */.sc-htpNat {} .flaKOJ{width:16px;height:16px;background:red;display:inline-block;} + .flaKOJ{margin-left:8px;}

which obviously doesn't work. What am i missing?

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/styled-components/styled-components/issues/523#issuecomment-389458287,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAiy1p_aaeDbAOl9TQFpwfneLnOkloU3ks5ty_M9gaJpZM4MIBcy
.