How can one effectively style nested elements within a React component?

When styling multiple div elements using CSS, there are different ways to achieve the same result. In traditional CSS, you can use a nested structure like this:

.wrapper{
  width: 300px;
  height: 500px;
  .container {
    width: 50%;
    height: 20%;
    .inside {
      color: red;
    }
  }
}

However, when using CSS modules, the syntax needs to be adjusted as shown below:

.wrapper{
      width: 300px;
      height: 500px;
}

.wrapper .container {
        width: 50%;
        height: 20%;
}

.wrapper .container .inside {
          color: red;
        }

Is there a more efficient and simpler way to achieve this? Especially when dealing with numerous elements, the current method may become cumbersome!

Answer №1

If you're looking to add some style, consider trying out the styled-components library.

For instance:

const Wrapper = styled.div`
    width: 300px;
    height: 500px;

    &.container{
        width: 50%;
        height: 20%;

        &.inside{
            color:red;
        }
    }

`

Although, my suggestion would be to approach it in a more React-oriented way:


const Wrapper = styled.div`
    width: 300px;
    height: 500px;
`
const Container = styled.div`
    width: 50%;
    height: 20%;
`
const Inside = styled.div`
    color: red;
`

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

Implementing a higher-order component to attach individual event listeners to each component

One of the challenges I am facing in my app is handling user inputs from the keyboard using components. To address this, I have developed the following function: export default function withKeydownEventHandler (handler) { id = id + 1 return lifecycle({ ...

Invoking a function within a React JS component from another function within the same component

How can the startserver function call the searchawsinfo function? startserver : function(){ var self = this; $.ajax({ type: "POST", url: "", // enter code here data: JSON.stringify(amazonEc2ManagerBean), contentType: "application/json", dataType: 'js ...

What are the reasons for the failure of an image upload when checked with PHP's is_uploaded_file function?

My html form allows users to upload images, but I'm encountering an issue where the uploaded image fails the "is_uploaded_file" check for some unknown reason. I'm puzzled as to why the upload is failing the is_uploaded_file check. Any ideas? He ...

The function _this2.props.moveShelf is not defined

I am currently learning React. One of the projects I am working on is a book app called Myreads. The app seems to render properly initially, but as soon as I interact with the select tag, an error message pops up. My initial assumption was that it might ...

What could be causing my CSS to behave unexpectedly?

Here is my css code that makes a dropdown menu visible: a.menu:hover { opacity: 1; text-shadow: 0 0 10px white; } a.menu:hover ~ .dropdown { display: block; } .dropdown { display: none; width: 50px; height: 50px; position: absolute; top: 120px; left: 120 ...

I'm having trouble viewing my display:table-cell content because Internet Explorer is hiding it

I am attempting to align an icon vertically centered and far right inside a container. I currently have code that achieves this using ::after and table-cell properties. However, the content does not display in Internet Explorer. If I remove the display:tab ...

Showing a multi-column layout for an HTML ul list

I have an automatic nested list structure that looks like this <ul> <li>AAA</li> <li>BBB <ul> <li>111 <ul> <li>XXX</li> </ul> </li> <l ...

Creating a CSS grid layout with dual columns to dynamically adjust and accommodate two items in each row

I am attempting to create this layout using CSS grid: https://i.sstatic.net/Ktbnm.png The goal is to have an input and a textarea. The textarea should be of the size of 2 inputs. If there is already a textarea in the previous column, the next column shou ...

What options do I have for personalizing event listeners in d3.js?

I am currently working on a simple program that involves using a slider to move a rectangle across a webpage. I have set up the slider like this: <input type = "range" min = "5" max = "500" value = "5" id = "xvalue" > and I am able to access the sl ...

Expanding Elements with CSS

I have a piece of HTML code as shown below <div> <div class="left"> </div> <div class="center"> </div> <div class="right"> </div> </div> .left { background: white; border-right: 1px s ...

Trouble with Bootstrap accordion data-toggle function on mobile devices

I noticed that someone else had asked a similar question without receiving an answer. I am currently having issues with Bootstrap's data-toggle for an accordion, particularly on mobile devices (not just IOS but also on Chrome developer tools and my Ga ...

What is causing my Bootstrap Dropdown Menus to disappear when I work with local files?

I have been utilizing Bootstrap for about a year now, and it has been quite effective. However, I encounter the same issue every time I attempt to use the files locally: my Navbar dropdown menus do not drop down. Could someone pinpoint what mistake I am m ...

Choose all list elements except the final one

I need to display a list of tags horizontally and add a comma after each item except for the last one. Here is how I can achieve this using CSS: ul.tags { list-style: none; } ul.tags > li { display: inline; } ul.tags > li:after { con ...

Tips on how to showcase only the essential elements

I'm tackling the challenge of creating a customized calendar utilizing the react FullCalendar component. The calendar is capable of executing CRUD operations, but I've hit a roadblock when it comes to displaying popup windows that send requests t ...

Angular 2: Change Boolean value depending on a condition

I find myself facing a challenge with a search-bar feature. My goal is to display all the filtered names when the input value reaches a length of 2 or more characters. After successfully extracting the value.length from the input field, I encountered a ro ...

Navigating and Displaying Views with React and Express

As a beginner in web development, I successfully completed a project using Node, Express, and EJS (for the frontend). Now, I am eager to tackle another project with React as my frontend. Despite watching numerous React + Express tutorials on YouTube, I not ...

The :not() exclusion in CSS property fails to exclude the class

I'm attempting to style all the links on my webpage in a particular way, except for those in the navigation bar. Despite trying to exclude the navbar links using a:not(.navbar), it seems that the styling still applies to all links, including Link 1 in ...

Tips for keeping a floating action button visible at the bottom of the screen at all times

I am currently utilizing the Material UI framework. I have a floating action button that I would like to display in a specific position on the page without it moving when scrolling, and I am also wondering if this is a common issue. Below is the code sn ...

Is there any benefit to making the SVG elements width and height 100%?

The Angular Material documentation app features an SVG Viewer that is able to scale the SVG content to fit the container using the following function: inlineSvgContent(template) { this.elementRef.nativeElement.innerHTML = template; if (this.sca ...

Can the conventional HTML context menu be swapped out for a link context menu instead?

Currently, I am working on developing a custom linkbox component that is similar to the one found on this page: Here is an example of the code: export const Linkbox = ({}) => { const linkRef = useRef(null); return ( // eslint-disable-next-l ...