Stylus is not working with React

Question

I'm helping create a webapp and we've recently switched to stylus and react. I've rewritten all the stylus lang files and written some react but the react is not being styled at all. Here is the component below.

import React, { Component } from 'react'
import Icon from 'react-component-bytesize-icons'

class CoursesCard extends Component {
    render() {
        const divStyle = {
            backgroundImage : '/assets/img/animatingCourse.jpg'
        }

        return (
          <div className='CoursesCard' style={divStyle}>
            <div className='CardOverlay'>
              <h3>What the courses is called?</h3>
              <p>Last Checed</p>
              <p>Users online</p>
            </div>
          </div>
        )
    }
}

export default CoursesCard

Here is the stylus lang code:

 .CoursesCard {
   width 32%
   margin 10px 1%
   float left
   padding-top 20%
   display inline-block
   background white
   box-shadow 0px 3px 20px #555

   background-repeat no-repeat
   background-size cover
   cursor pointer

   &.hover{
      box-shadow 0px 3px 22px #333
    }

.CardOverlay {
    width 100%
   height auto
   padding 10px 0
   background rgba(33,51,66,0.8)
   color #fff

   background-repeat no-repeat
   background-size cover
   cursor pointer

  &.hover {
    box-shadow 0px 3px 22px #333
  }

  h3{
    font-size 18px
    font-weight 500
      margin-bottom 5px
    margin-left 10px
  }
  p.lastChecked{
    font-size 13px
      font-weight 100
      margin-bottom 5px
      margin-left 10px
  }
  p.onlineUsers{
    font-size 14px
      font-weight 400
      margin-left 10px
      display block
  }
}

}

Answer 1

React has nothing to do with Stylus at all.

I suppose you are using Webpack as bundler of choice. If so, you have to configure Webpack so that it understands what to do with .styl files (or whatever file extension is used).

Webpack has concept of loaders - loader loads file, transforms it in some way and pushes output down the chain.

You need to add stylus loader. To do so, please take a look at this plugin's GH page