Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

No styling or icons appear when I use a mdbreact component - Footer

I am building a simple landing page and wanted to make a footer component for the same. I used the npm command npm install --save mdbreact to install the dependency and copied the following snippet of code from the mdb website.

import React from 'react';
import { Col, Container, Row, Footer } from 'mdbreact';

export class FooterPage extends React.Component {
    render() {
        return (
            <Footer color="stylish-color-dark" className="page-footer font-small pt-4 mt-4">
                <Container className="text-left">
                    <Row>
                        <Col md="6">
                            <h5 className="text-uppercase mb-4 mt-3 font-weight-bold">Footer Content</h5>
                            <p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit
                            amet, consectetur adipisicing elit.</p>
                        </Col>
                        <hr className="clearfix w-100 d-md-none" />
                        <Col md="2">
                            <h5 className="text-uppercase mb-4 mt-3 font-weight-bold">Links</h5>
                            <ul className="list-unstyled">
                                <li><a href="#!">Link 1</a></li>
                                <li><a href="#!">Link 2</a></li>
                                <li><a href="#!">Link 3</a></li>
                                <li><a href="#!">Link 4</a></li>
                            </ul>
                        </Col>
                        <hr className="clearfix w-100 d-md-none" />
                        <Col md="2">
                            <h5 className="text-uppercase mb-4 mt-3 font-weight-bold">Links</h5>
                            <ul className="list-unstyled">
                                <li><a href="#!">Link 1</a></li>
                                <li><a href="#!">Link 2</a></li>
                                <li><a href="#!">Link 3</a></li>
                                <li><a href="#!">Link 4</a></li>
                            </ul>
                        </Col>
                        <hr className="clearfix w-100 d-md-none" />
                        <Col md="2">
                            <h5 className="text-uppercase mb-4 mt-3 font-weight-bold">Links</h5>
                            <ul className="list-unstyled">
                                <li><a href="#!">Link 1</a></li>
                                <li><a href="#!">Link 2</a></li>
                                <li><a href="#!">Link 3</a></li>
                                <li><a href="#!">Link 4</a></li>
                            </ul>
                        </Col>
                    </Row>
                </Container>
                <hr />
                <div className="text-center py-3">
                    <ul className="list-unstyled list-inline mb-0">
                        <li className="list-inline-item">
                            <h5 className="mb-1">Register for free</h5>
                        </li>
                        <li className="list-inline-item"><a href="#" className="btn btn-danger btn-rounded">Sign up!</a></li>
                    </ul>
                </div>
                <hr />
                <div className="text-center">
                    <ul className="list-unstyled list-inline">
                        <li className="list-inline-item"><a className="btn-floating btn-sm btn-fb mx-1"><i className="fa fa-facebook"> </i></a></li>
                        <li className="list-inline-item"><a className="btn-floating btn-sm btn-tw mx-1"><i className="fa fa-twitter"> </i></a></li>
                        <li className="list-inline-item"><a className="btn-floating btn-sm btn-gplus mx-1"><i className="fa fa-google-plus"> </i></a></li>
                        <li className="list-inline-item"><a className="btn-floating btn-sm btn-li mx-1"><i className="fa fa-linkedin"> </i></a></li>
                        <li className="list-inline-item"><a className="btn-floating btn-sm btn-dribbble mx-1"><i className="fa fa-dribbble"> </i></a></li>
                    </ul>
                </div>
                <div className="footer-copyright text-center">
                    <Container fluid>
                        &copy; {(new Date().getFullYear())} Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a>
                    </Container>
                </div>
            </Footer>
        );
    }
}

export default FooterPage;

Now the problem is that the component appears on the main page but with no styling or icons. What it should look like: Footer Expectation

How it actually looks: Footer Reality

Can someone help me with how to get the styles and icons working?

like image 536
Nirmal Dalmia Avatar asked Jun 06 '18 10:06

Nirmal Dalmia


People also ask

Can't resolve react icons FC?

To solve the error "Module not found: Error: Can't resolve 'react-icons'", make sure to install the react-icons package by opening your terminal in your project's root directory and running the command npm install react-icons and restart your dev server.

How do I use bootstrap react icons?

import React from 'react'; import * as Icon from 'react-bootstrap-icons'; export default function App() => { return <Icon. ArrowRight /> }; The icon names are the PascalCase version of the original name. For those icons whose name begins with a number, the Icon prefix will be used.

What is footer in React React Bootstrap 4?

React Footer - Bootstrap 4 & Material Design. Footer is an additional navigation for the website. It can hold links, company info, copyrights, buttons, forms. and many other elements. You can set the color of the footer by adding one of classes from our color palette. Just like any other components of MDBootstrap, Footers are responsive by default.

What is footer in mdbootstrap?

Footer is an additional navigation for the website. It can hold links, company info, copyrights, buttons, forms. and many other elements. You can set the color of the footer by adding one of classes from our color palette. Just like any other components of MDBootstrap, Footers are responsive by default.

How do I apply styling to an existing React component?

When applying styling to an existing (own or third party) React component using styled-components' styled (MyComponent) notation, it is important that the className prop (or style prop, if you're using react-native) is attached to a DOM element in that React component. If that is not the case, then the styling won't be applied.

What are the allowed props for iconcontext in react?

If you take a look at where the IconContext is defined within react-icons, you can see the allowed props: export interface IconContext { color?: string; size?: string; className?: string; style?: React.CSSProperties; attr?:


1 Answers

You need to add ---- import 'mdbreact/dist/css/mdb.css' ----

enter image description here

enter image description here

they may be some deviation in icon's because am using old icon set.

Also to get the icons to work you need to install fontawesome package using npm install --save react-fontawesome And then include it's CSS using the following line import 'font-awesome/css/font-awesome.min.css';

like image 179
Srinivasan Lakshmanan Avatar answered Sep 20 '22 13:09

Srinivasan Lakshmanan