Шаговый двигатель React.js

Привет, я пытаюсь создать свой нижний колонтитул, который в основном представляет собой степпер, который будет информировать пользователей о том, где они находятся в приложении.

Компонент нижнего колонтитула (Stepper):

export default class Footer extends Component {

  render() {
    return (
       <MuiThemeProvider>
         <div className="row">
          <div className="footer">
          <div className="container-fluid" style={containerStyle}>
              <div className="col-sm-12">
                <div className="steps" style={stepStyle}><img src={trailerGray} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div>
                <div className="steps" style={stepStyle}><img src={clockIcon} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div>
                <div className="steps" style={stepStyle}><img src={shieldGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div>
                <div className="steps" style={stepStyle}><img src={detailsGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div>
                <div className="steps" style={stepStyle}><img src={detailsGrey} href="" width="60px" height="60px" style={{margin:25}} alt=""/></div>
              </div>
            </div>
          </div>
      </div>
  </MuiThemeProvider>
  );
 }
}

Я хотел бы сделать div, который оборачивает изображения, чтобы изменить цвет фона в зависимости от маршрута

И я добавляю свой компонент нижнего колонтитула в другие представления:

<Footer />

Я использую реактивный маршрутизатор

Не могли бы вы предложить путь, по которому мне следует идти? Также приветствуются любые предложения. Спасибо.