Styles not getting picked up

[gibdr7]

Somewhat new to React, so this might be a dumb fix...

Below code is me trying to create a simple Vertical Timeline using this package. When I deploy it, the styles don't get picked up?

Full component code here

Projects.js

import React from 'react';
// import '../resume.scss'
import {
  VerticalTimeline,
  VerticalTimelineElement,
} from 'react-vertical-timeline-component';
import 'react-vertical-timeline-component/style.min.css';
import { FaSuitcase, FaSchool, FaStar } from 'react-icons/fa';

const Projects = () => {
  return (
    // <div>test</div>
    <VerticalTimeline>
      <VerticalTimelineElement
        className="vertical-timeline-element--work"
        contentStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
        contentArrowStyle={{ borderRight: '7px solid  rgb(33, 150, 243)' }}
        date="2011 - present"
        iconStyle={{ background: 'rgb(33, 150, 243)', color: '#fff' }}
        icon={<FaSuitcase />}
      >
        <h3 className="vertical-timeline-element-title">Creative Director</h3>
        <h4 className="vertical-timeline-element-subtitle">Miami, FL</h4>
        <p>
          Creative Direction, User Experience, Visual Design, Project
          Management, Team Leading
        </p>
      </VerticalTimelineElement>
      <VerticalTimelineElement
        iconStyle={{ background: 'rgb(16, 204, 82)', color: '#fff' }}
        icon={<FaStar />}
      />
    </VerticalTimeline>
  )
}

export default Projects

Browser tools

[stephane-monnot]

I found the problem. You use gatsby-plugin-purgecss in your project, so it removes unused styles in your project. You can configure it in your gatsby-config.js. Maybe add an ignore rule.

[gibdr7]

Great catch @stephane-monnot , thanks! I have it working well now.