How to control custom props?

[katanazero86]

Below is the styled component example code, is it possible to use the following functions in stitches? Which part of the document should I refer to?

const Tab = styled.button`
  width: 100%;
  outline: 0;
  border: 0;
  height: 100%;
  justify-content: center;
  align-items: center;
  line-height: 0.2;

  ${({ active }) => active && `
    background: blue;
  `}
`;

<Tab active={this.state.active} onClick={this.handleButton}></Tab>

[tianenpang]

Refer to the Variants section in the documentation.

const Tab = styled('button', {
  // base styles

  variants: {
    active: {
      true: {
        background: "blue"
      },
      false: {
        // styles when inactive
      },
    },
  },
});

() => <Tab active={this.state.active} onClick={this.handleButton}></Tab>;

[katanazero86]

thanks