I want to change the StyledButton depends on the props passed. When complex is `true`, it's supposed to go to complexMixin and then determine what `whiteColor` passes. But even I pass whiteColor with `true`, the color is black, not white.

Does anyone have idea what's going on with it? Thanks!

[Demo](https://codesandbox.io/s/cocky-rgb-lq8e8?file=/src/App.js)

```js
import styled, { css } from "styled-components";

const complexMixin = css`
  color: ${({ whiteColor }) => (whiteColor ? "white" : "black")};
`;

const StyledButton = styled.div`
  border: 1px solid red;
  height: 100px;
  text-align: center;
  margin: 20px;
  font-weight: 700;
  font-size: 40px;
  color: ${({ complex }) => (complex ? complexMixin : "green")};
`;

const App = () => {
  const isComplex = true;
  const isWhite = true;
  return (
    <>
      <StyledButton whiteColor={isWhite} complex={isComplex}>
        ccc
      </StyledButton>
      <StyledButton complex={!isComplex}>BBB</StyledButton>
    </>
  );
};

```