React Styled Components not getting mode props

Question

I'm using react 15.6, in my component I have a situation where I want to pass a mode prop to mycustomfunction which returns some css.

export const mycustomfunction = (mode=false) => css`
  ${bp('s_up')`
    padding: ${pxToRem(50)} ${mode? flexGridUnit(0.5) : flexGridUnit(1)} !important;
  `}
`;

Here by default mode should be false if not passed. Now I'm calling it this way

const MyFields = styled.div.attrs({
  className: 'someclassname',
})`
  ${mycustomfunction(mode)}
`;

and in render method

<MyFields mode={test.mode}>
  <SomeOtherFields></SomeOtherFields>
</MyFields>

test.mode is either true or false.

It show error as mode is not defined at ${mycustomfunction(mode)}.

What is wrong in the code.

Any help is much appreciated.

Answer 1

You haven't used the prop mode in the styled component itself:

const MyFields = styled.div.attrs({
  className: "someclassname",
})`
  ${(props) => mycustomfunction(props.mode)}
`;