I am currently working on a React component and I want to incorporate Google's MDL (Material Design Lite) into it. I followed the instructions provided on their website here, which state that I need to link the CSS from their server. However, when I added the links to the main index.html file and referenced the styles in my component, it doesn't seem to be applied. Can someone guide me on the correct way to do this? Keep in mind that I am new to working with React.
Below is the code for my component:
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 the content of 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>