Step 11

We are going to add an "add" button to our React app! To that aim, we will provide our own styling and combine it with the built-in Material-UI styles.

The Material-UI allows you to provide your styling classes and extend or override the default ones. We follow this pattern to provide our styles:

import { Fab, withStyles } from "@material-ui/core";

const styles = {
  myStyle: {
    fontSize: "40px;",
  }
};

function MyComponent(props) {

  return ( 
    <Fab className={props.classes.myStyle}>My Component</Fab>
  );
}

export default withStyles(styles)(MyComponent);

In Material Design, a floating action button (FAB) represents the primary action of a screen.

The withStyle is a Higher-order React Component. When we wrap the MyComponent in the withStyles higher-order component, it injects a classes props to it. We can use this prop to access the styles we defined.

Let's update the App.js. First, update the import statements:

- import { Container, List } from "@material-ui/core";
+ import { Container, List, Fab, withStyles } from "@material-ui/core";
+ import { Add } from "@material-ui/icons";

Next, add the following to the top of the file (after import statements and before class declaration):

const styles = {
  fab: {
    position: 'absolute',
    bottom: "2rem",
    right: "2rem",
  }
};

Next, update the export statement:

- export default App;
+ export default withStyles(styles)(App);

Finally, update the render method:

  render() {
    const { notes } = this.state;
    return (
      <Container>
        <List>
          {notes.map((note, index) => {
            return (
              <Note note={note} key={index} deleteNote={this.deleteNote} />
            );
          })}
        </List>
+       <Fab aria-label={"Add"} className={this.props.classes.fab}>
+         <Add />
+      </Fab>
      </Container>
    );
  }

The aria-label is an HTML attribute used to define a string that labels the current element. It is used in cases where a text label is not visible on the screen.

Save the file and visit the React App.