Component css class in React will not render to DOM

Question

I would like my browser to show my React application with QuickTab component, in the style I assigned.

This is what my browser shows currently:

CSS:

.MostPopular{
  width: 20%;
  height: 100px;
  background-color: #0000FF;
  border-radius: 0 0 30px 30px;
  margin: 2% auto;
  position: relative;
}

Here is the component. I left the other switch cases out for brevity.

React, QuickTab.js:

 import React, {Component} from 'react';
 import classes from './QuickTab.css';
 import PropTypes from 'prop-types';

class QuickTab extends Component{
  render(){
    let quickTab = null;

    switch(this.props.type){

      case('most-popular'):
        quickTab= <div className={classes.MostPopular}></div>
        break;

      default:
        quickTab= null;

    }

    return quickTab;
  }
}

//Add prop type validation
QuickTab.propTypes = {
  type: PropTypes.string.isRequired
};

export default QuickTab;

Here's the component call in my App.js file:

import React, { Component } from 'react';
import QuickTab from'../components/QuickTabGroup/QuickTab/QuickTab';

class App extends Component {
  render() {
    return (
      <QuickTab type='most-popular'/>
    );
  }
}

Adam Lagevik · Accepted Answer · 2018-10-19 08:55:30Z

1

Replace className={classes.MostPopular} to className="MostPopular" and import your style like this

import './QuickTab.css';

or

require('./QuickTab.css');

answered Oct 19, 2018 at 8:55

Adam Lagevik

6811 gold badge7 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Component css class in React will not render to DOM

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related