Wrapper

Sometimes, you may find yourself requiring a wrapper (or a way to group) certain Modules. Lucid provides a <Wrapper> Component to be used in such scenarios. Consider a wrapped <Header> Module:

<Wrapper>
  <Header />
</Wrapper>

Styles can be provided to the Wrapper Component from a child Module, so long as there is just a single child:

const styles = {
  backgroundColor: '#444444',
  color: 'white',
  padding: '10px',

  wrapper: {
    position: 'absolute',
    top: '20px'
  }
}

const Header = (props) => (
  <Module styles={styles}>{props.children}</Module>
);

export default Header;

If you find yourself doing this, consider refactoring your header to include a wrapper Component

You can utilise the usual features of Lucid on the Wrapper Component:

<Wrapper flush>
  <Header />
</Wrapper>

const styles = {
  backgroundColor: '#444444',
  color: 'white',
  padding: '10px',

  wrapper: ({ state }) => ({
    position: 'absolute',
    top: state.flush ? '0' : '20px'
  })
}

const Header = (props) => (
  <Module styles={styles}>{props.children}</Module>
);

export default Header;

...or alternatively:

const styles = ({ context }) => ({
  backgroundColor: '#444444',
  color: 'white',
  padding: '10px',

  wrapper: {
    position: 'absolute',
    top: context.wrapper.flush ? '0' : '20px'
  }
});

...