Creating custom CSS for Styled Components in ReactJS

I'm struggling with CSS in React using styled components. Below is the code snippet I am working with:

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;

The desired outcome is to change the color of the h1 tag to white. However, the custom CSS provided above does not seem to be taking effect. I have also attempted using background-color, but the issue remains unresolved.

javascriptcssreactjsjsxstyled-components

Answer №1

When implementing styles with styled-components, it's important to avoid using classes directly for styling. Instead, the best practice is to create separate wrappers for components. Here is an example of how you can achieve 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>Hello</Header>
          </Col>
        </Row>
      </Container>
    </StyledNavbar>
  );
};

export default Footer;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing data with the click of a button

I have successfully implemented a feature where clicking the "add to my stay" button displays the name and price data. Subsequently, it automatically changes to a remove button when clicked again for another addon. If I press the remove button of the first ...

javascriptjqueryhtml

Looking to alter the CSS of an ID element when hovering over a link on your website?

Irrespective of the positioning of the links in the html, a simple hover effect can trigger changes like switching images or altering backgrounds anywhere on the website. The ideal solution would involve a straightforward method without the need for Javas ...

javascripthtmlcss

Issue with autoplay slideshow functionality not activating when opened in a new tab

The owl.carousel.js plugin is used for creating a jQuery slideshow. Initially, the slideshow works correctly, but I noticed that the autoplay feature stops working when I open a new tab in Firefox or Chrome. Demo : Demo : $(document).ready(function () ...

javascriptjqueryhtmlcssowl-carousel

What could be causing my linear background to behave in this unusual manner?

Just when I thought styling my background with a simple line of code would be easy, I encountered an unexpected issue. Instead of a smooth linear-gradient from the top left to the bottom right, my background is showing rows of red and blue in between each ...

htmlcss

Solution not provided for limiting the maximum length in Material UI Textfield

I attempted to set the max length attribute of a TextField in Material-Ui, but couldn't find any property that worked. I also tried using the code below, but it still didn't work: <TextField label="Amazon Login" name=" ...

reactjsmaterial-ui

I appear to be having issues with the pseudo-element. Is there something I am doing incorrectly? This relates to the first child

I initially tried to make the opening paragraph stand out by applying a red color, but unexpectedly, all elements on the page turned red. view image here <!DOCTYPE html> <html lang="en"> <head> <link rel="styleshee ...

htmlcss

Exploring the power of React Hooks with the useState() function and an array filled

When creating new "Todo" items and modifying the fields, everything works fine. However, my problem arises when trying to retrieve the child data after clicking the "show all objects" button. To better understand my issue, here is a code example: const Co ...

javascriptreactjs

I want to create a form with two dropdown menus placed side by side within a parent DIV, and I want them to collectively occupy the entire width using Bootstrap

Currently, I am working on a search form using Bootstrap. Everything is going well, but I am facing an issue where two multi-option elements need to be placed side by side and together occupy 100% of the width within their containing DIV. Just for clarity ...

htmlcssformstwitter-bootstrapwidth

Issue with Angular 17 button click functionality not functioning as expected

Having trouble with a button that should trigger the function fun(). Here's the code snippet I'm using. In my TS file: fun(): void { this.test = 'You are my hero!'; alert('hello') } Here is the respective HTML: &l ...

javascriptangulartypescript

Using Conditional Rendering and ReactCSSTransitionGroup for Dynamic Animations

I have developed a small application that displays different components based on a Redux state. I am trying to add a "fade" animation when one of the components renders, but unfortunately, it is not working as expected. Here is my current setup: content.j ...

javascriptreactjs

Tips for effectively handling numerous iterations of an identical NPM dependency

Situation I have been working on creating various D3.js charts using the latest version of D3 (4.9.1). However, I also need to incorporate occasional C3.js charts into my application, which poses a challenge as C3 requires D3 v3.5.0. Exploring Options ...

javascriptnpmyarnpkgbowerc3.js

Passing properties from the parent component to the child component in Vue3JS using TypeScript

Today marks my inaugural experience with VueJS, as we delve into a class project utilizing TypeScript. The task at hand is to transfer the attributes of the tabsData variable from the parent component (the view) to the child (the view component). Allow me ...

javascripttypescriptvue.jsvuejs3

Creating a customized design for a q-popup-edit

As I navigate through using Quasar in Vue, I stumbled upon a q-popup-edit that allows me to gather input from the user. Despite my attempts at researching via Google and reading documentation, I have hit a roadblock when it comes to customizing the style o ...

cssvue.jsquasar

What is the correct way to initialize a jQuery module within a React component?

In my React component hierarchy, I have a parent component named Sorter. Inside of Sorter, there is a child component for a range slider: <div className="child"> <rangeSlider props=... /> </div> The <rangeSlider props={...}/> ...

reactjs

Is it possible to use NextJS to simultaneously build multiple projects and export them as static sites?

I'm currently working on a small Next.js project where I retrieve data from various API endpoints. These endpoints typically follow this format: https://enpoint.com/some-query/project1 The interesting thing about the API is that it can return differe ...

javascriptreactjswebpacknext.js

Setting the current date as the default in an input box using ng-it: a step-by-step guide

How do I automatically set today's date as the default in the input box using ng-it? Here is my Plunker I am simply looking to set today's date as the default in the input field using ng-it. Would appreciate it if you could check out my P ...

javascriptangularjs

C# implementation of the btoa function from JavaScript

I am in need of assistance recoding a JavaScript function to C# that makes use of the btoa method to convert a string of Unicode characters into base64. The challenge lies in ensuring that the encoding used in both languages is identical, as currently, the ...

javascriptc#.netnode.js

Tips for adding an array to a formData: incorporating an array with two values along with their corresponding keys

Snippet : const options = new RequestOptions({ headers: headers }); let myArray; myArray = [{ "subfolder_name": subfolder, "file_upload": file }]; let formData: FormData = new FormData(); formData.append("folder_name",folder ); formData.append("counse ...

javascriptangularjsmultipartform-data

What is the method of using "*" as the value for allowedModules in a jsreport configuration file to enable all modules?

I am having an issue when trying to generate a report using jsreport STUDIO. The error message I received is as follows: An error occurred - Error during rendering report: Unsupported module in scripts: request. To enable require on a particular module, ...

javascriptnode.jsnpmreportjsreport

Encountering difficulties while trying to access the SQLite database file through a JavaScript Axios GET request

Having trouble opening an sqlite DB file from a js axios.get request which is resulting in an exception message being outputted to the console. The request is supposed to call my PHP controller to retrieve data from the DB and return it json-encoded. On t ...

javascriptphpvue.jssqliteaxios