Material-UI with React
Create a React project
npx create-react-app material-ui-react
Move to the folder project
cd material-ui-react
Import Material-UI with npm or yarn (Just one of course!)
npm install @material-ui/core
or
yarn add @material-ui/core
Start the Application
npm start
or
yarn star
Open the folder project in your favourite Text Editor
Delete the code between the header tag
- Delete the all the code between the header tag in src/App.js
Add a Button
- Go to src/App.js file
- Add the following line under the imports
import Button from '@material-ui/core/Button'
- Add all the Contained Buttons that the current Material-UI documentation give us between the header tag
<Button variant="contained">Default</Button>
<Button variant="contained" color="primary">
Primary
</Button>
<Button variant="contained" color="secondary">
Secondary
</Button>
<Button variant="contained" disabled>
Disabled
</Button>
<Button variant="contained" color="primary" href="#contained-buttons">
Link
</Button>
*You can see the look of the buttons in the following link. You will also find other types of buttons that you can use in your project *
Link
Add a Button Group
In the Buttons code we entered before, we only worked with contained variant. There is a better way instead of repeting the variant="contained" part in our code. To avoid all this repeated code we are going to use Button Group
- Import the ButtonGroup functionality
import ButtonGroup from '@material-ui/core/ButtonGroup';
- Replace the code before to this new one:
<ButtonGroup
variant="contained">
<Button>Default</Button>
<Button color="primary">
Primary
</Button>
<Button color="secondary">
Secondary
</Button>
<Button disabled>
Disabled
</Button>
<Button color="primary" href="#contained-buttons">
Link
</Button>
</ButtonGroup>
Top comments (0)