在react app中的按钮上使用CSS转换不会渲染组件

Question

如何使用反应组件进行CSS转换？用户按下下面的div（side-nav-4a），然后在另一个兄弟组件中呈现一个组件。 CSS变换不会渲染任何内容。删除CSS中的变换将呈现组件。

CSS

side-nav-4a {
  grid-column: 1 / span 1;
  grid-row: 17 / span 4;
  background: #EFF0F0;
  font-family: 'Lato', sans-serif;
  font-size: medium;
  transition: background 0.2s ease;
  color: #757575;
  text-align: center;
  min-width: 11.4rem;

  &:hover, &:focus {
    background: #DADBDB;
    cursor: pointer;
  }

  //&:active {
  //  transform: scale(.97);
  //  z-index: -1;
  //}
}

.openings-feesA-key {
  text-align: center;
  vertical-align: middle;
  line-height: 10rem;
}

Clicked div（React组件）：

import React from "react";

export default class SideBar4a extends React.Component {
  render() {
    const date = new Date().getFullYear();
    return (
      <div onClick={this.props.setOpeningsAndFeesA} className='openings-feesA-key'>
        <h3>FEES {date}</h3>
      </div>
    );
  }
}

呈现渲染的组件：

import React from 'react';

export default () => {
  return (
    <div className='intermezzi-content'>
      <p>some intermezzi content</p>
    </div>
  )
}