React.js include css

Question

I am working on MERN.io project. I am using React.js component Dropdown.

But it doesn't contain its style and css and no-stying at all.

...
import Dropdown from 'react-dropdown';
import styles from './../../../../assets/css/style.css';

class OrderCreateWidget extends Component {
...
  render() {
...
    return(
      <div>
        <div className={styles["row"]}>
          <div className={styles["col-lg-12"]}>
            <div className={styles["card"]}>
              <div className={styles["card-header"]}>
                Place Order
              </div>
              <div className={styles["card-block"]}>
                <h5>*NOTICE* Please make sure that you have "Followers" enabled on your profile so that the share button appears for non-friends too, that will enable us to promote your post.</h5>
                <br/>
                <div className={styles["row"]}>
                  <div className={styles["col-lg-7"]}>
                    <div className={`${styles["row"]} ${styles["form-group"]}`}>
                      <label className={styles["col-md-3"]}>Service</label>
                        <Dropdown options={options} onChange={this._onSericeSelect} value='fb_likes1' placeholder="Select an option" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>         
    )

 ...
}

this is the screenshot how dropdown works, currently. I wishes great help from you. Thank you.

Skribja · Accepted Answer · 2017-07-12 07:00:27Z

1

import 'react-dropdown/style.css';

answered Jul 12, 2017 at 7:00

Skribja

1611 silver badge5 bronze badges

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

7 Comments

Cool Eagle Over a year ago

It works. But when I want to rebuild with webpack, it reports an error. /Volumes/Data/Projects/Rantic-Tyler/rantic_mern/client/modules/Order/components/OrderCreateWidget/OrderCreateWidget.js:1939 content.locals; ^ ReferenceError: content is not defined at Object.<anonymous> (/Volumes/Data/Projects/Rantic-Tyler/rantic_mern/client/modules/Order/components/OrderCreateWidget/OrderCreateWidget.js:11:1)

Skribja Over a year ago

@KonstantinJ. more info please

Cool Eagle Over a year ago

I am using mern.io as a start project and I am including that css file in my component. But when I want to compile it, it reports an error like the above. I think it is because of webpack.

Skribja Over a year ago

@KonstantinJ. can you share a config?

Cool Eagle Over a year ago

gist.github.com/anonymous/0bf2bbb9317ca42f285bec37ac0ad85b gist.github.com/anonymous/47d146f73eb0e3805aa8204035821c32

|

Collectives™ on Stack Overflow

React.js include css

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related