vishal dharankar vishal dharankar -4 years ago 138
React JSX Question

How to link remote CSS to React component

I am trying to create a simple component in React where I am trying to use Google's MDL from here https://getmdl.io/started/index.html , so as they state I need to link the CSS from their server , I would like to know where should i do this. I tried it adding it to main index.html and refer to style in component but seems like its not being used.
What should be the proper way to do this ?
I am a novice at React stuff.

Component code

import React from 'react';

class App extends React.Component {
render() {
return (
<div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
New button
</button>
</div>

);
}
}

export default App;


This is index.html

<!DOCTYPE html>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>

<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>

</html>

Answer Source

You have to use className instead of class to refer to css classes in React because class is a reserved word in ES6 and with JSX you are writing Javascript and not HTML. For example:

<button className="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
    New button
 </button>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download