CODEWITHSUNDEEP
javascriptcssreactjsjsxstyled-components
Nimrod
Nimrod

Reputation: 389

Styled Component Custom CSS in ReactJS

I'm actually having trouble doing CSS with the styled component in React. Given below is the code snippet

import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';

const Styles = styled.div`
  .navbar {
    background-color: black;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .h1 {
    color: white;
  }
`;

const Footer = () => {
  return (
    <Styles>
      <Navbar>
        <Container>
          <Row>
            <Col sm={{ size: 4 }}>
              <h1>Hi</h1>
            </Col>
          </Row>
        </Container>
      </Navbar>
    </Styles>
  );
};

export default Footer;

What I want to do is to change the color of the h1 tag to white but the above custom CSS is not working. I've tried background-color too, but still the issue persists.

Upvotes: 1

Views: 433

Answers (2)

sergdenisov
sergdenisov

Reputation: 8572

With styled-components, you shouldn't use classes for styling elements. You should use separated wrappers for components, it's the main point. I think you wanted to do something like this:

import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';

const StyledNavbar = styled(Navbar)`
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
`;

const Header = styled.h1`
  color: white;
`;

const Footer = () => {
  return (
    <StyledNavbar>
      <Container>
        <Row>
          <Col sm={{ size: 4 }}>
            <Header>Hi</Header>
          </Col>
        </Row>
      </Container>
    </StyledNavbar>
  );
};

export default Footer;

Upvotes: 2

user11198604
user11198604

Reputation:

you used .h1 the class, not h1 the tag, in your css.

https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

Upvotes: 1

Related Questions