Why could not to test in css style ? (using testing-react-library)

Why does not work to test to 'css style' in testing-reacgt-library?

My code to test is here.

<div onClick=onToggle data-testid='click-event' >
  <HeadText 
    data-testid="color-test"
    size="22px"
    active={boolean}
  >
    the party &nbsp;
    <Br />
    <div>When the party starts</div>
  </HeadText>
<div>

const HeadText = styled.div`
  letter-spacing: -0.88px;
  size: 22px;
  color: ${(props) => (props.active ? "green" : "red")};    *** toggle on -> color : green
  height: 1.43;
  mobile-size: 14px;

There are toggle function in upper code. When I clicked "the party " of text, it would be changed to color (eg. red -> green). The thing when clicked the text "the party" is well rendered and actually changed to color to green.

My test code was failed.

Please tell me what should I do below the code.

describe("Guide rendered", () => {
  test("Have been changed of color?", () => {
    const { getByTestId } = render(<Guide />);
    
    const titleOfGuide = getByTestId("click-event")
    const colorOftitle = getByTestId("color-test")

    fireEvent.click(titleOfGuide)
    
    expect(colorOftitle).toHaveStyle("active:true") // ("color: green")...etc. all failed

  })

}