CODEWITHSUNDEEP
reactjsmaterial-uisticky-footer
rysv
rysv

Reputation: 3460

ReactJS Material UI sticky footer not working

How do I get sticky footer with ReactJS using Material UI. I tried this but not sticking to the bottom.

export default function Footer() {
    return (
        <footer style={{color: "gray"}}>
            <center>Copyright ...</center>
        </footer>
    )
}

Looks like there is no native support in materialui. Will be good if the solution does not use boostrap.

Upvotes: 1

Views: 15210

Answers (3)

Akshay Mathur
Akshay Mathur

Reputation: 501

You can make your footer sticky with something like this

export default function Footer() {return (
    <footer style={{color: "gray", position: "fixed", bottom: 0}}>
        <center>Copyright ...</center>
    </footer>
)}

Upvotes: -2

Murali Kollati
Murali Kollati

Reputation: 149

This works for you

export default function Footer() {
    return (
        <footer className="sticky bottom-0">
            <center>Copyright ...</center>
        </footer>
    )
}

Upvotes: -1

Viet
Viet

Reputation: 12807

You should use position fixed for footer:

<footer style={{color: "gray", position: "fixed", bottom: 0}}>
  <center>Copyright ...</center>
</footer>

Upvotes: 8

Related Questions