When working with styled components, how can I effectively apply different styles using two layers of class names within the component declaration?

Question

When working with styled components, how can I effectively apply different styles using two layers of class names within the component declaration?

In my next.js project, I have developed a Container component with specific styles. As I incorporate this container component throughout the site, I aim to assign it a className for context-based styling.

Illustrated below is an example of the Container component:

    const Container = (props) => (
    <>
        <div className="container">
            {props.children}
        </div>

        <style jsx>{`
            .container{
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
            }
        `}</style>
    </>
)

export default Container;

The Container has been successfully styled to have a maximum width of 1200px and centered using auto margins. All functioning as intended.

I am now considering utilizing this component in the header section of my website. In the case of the header, I wish for the Container component to behave as a flexbox:

import Container from './Container'

const Header = (props) => (
    <>
        <header>
            <Container className="header-col">
                <div>
                    <h1>{props.title}</h1>
                </div>
                <nav>
                    <ul>
                        {/* Navigation items */}
                    </ul>
                </nav>
            </Container>
        </header>

        <style jsx>{`
            .header-col{
                display: flex;
                justify-content: space-between;
            }
        `}</style>
    </>
)

export default Header;

Upon reviewing the site, I observed that the flexbox style set for the Container component within the header is not being applied.

I anticipated the className to trigger additional styles, but it seems to treat it as a prop rather than a class name. However, I prefer maintaining code reusability by implementing style inheritance on components.

Is there a way to achieve this?

Appreciate any guidance provided!

css reactjs next.js styles

Answer 1

Answer №1

Utilizing styled components is the way to go for this task:

import React from "react";
import styled from "styled-components";

export default function App() {
  return (
    <>
      <Container custom={"header"}>
        <h1>Very fancy h1 with flex display</h1>
      </Container>
      <Container custom={"regular"}>
        <h1>Non-fancy h1 with no flex display</h1>
      </Container>
    </>
  );
}

const Container = styled.div`
  display: ${(props) => (props.custom === "header" ? "flex" : "block")};
  
  & h1 {
    font-family: ${(props) =>
      props.custom === "header"
        ? '"Courier New", Courier, monospace'
        : '"Arial Black", Gadget, sans-serif'};
  }
`;

The customized styled component I've created above takes the custom prop and adjusts values conditionally. Additionally, I added styling to the font to clearly differentiate between the two <Container> elements.

To address scalability concerns, like accommodating different themes, consider using ThemeProvider:

import React from "react";
import styled, { ThemeProvider } from "styled-components";

export default function App() {
  return (
    <>
      <ThemeProvider theme={ContainerHeader}>
        <Container>
          <h1>Very fancy h1 with flex display</h1>
        </Container>
      </ThemeProvider>
      <Container theme={"regular"}>
        <h1>Non-fancy h1 with no flex display</h1>
      </Container>
    </>
  );
}

const Container = styled.div`
  display: ${(props) => props.theme.display};
  & h1 {
    font-family: ${(props) => props.theme.h1Font};
  }
`;

Container.defaultProps = {
  theme: {
    display: "block",
    h1Font: '"Arial Black", Gadget, sans-serif'
  }
};

const ContainerHeader = {
  display: "flex",
  h1Font: '"Courier New", Courier, monospace'
};

Explore the solution further on CodeSandbox: https://codesandbox.io/s/stack-conditional-styled-components-vmnpn?file=/src/App.js:0-773

Answer 2

Utilizing styled components is the way to go for this task:

import React from "react";
import styled from "styled-components";

export default function App() {
  return (
    <>
      <Container custom={"header"}>
        <h1>Very fancy h1 with flex display</h1>
      </Container>
      <Container custom={"regular"}>
        <h1>Non-fancy h1 with no flex display</h1>
      </Container>
    </>
  );
}

const Container = styled.div`
  display: ${(props) => (props.custom === "header" ? "flex" : "block")};
  
  & h1 {
    font-family: ${(props) =>
      props.custom === "header"
        ? '"Courier New", Courier, monospace'
        : '"Arial Black", Gadget, sans-serif'};
  }
`;

The customized styled component I've created above takes the custom prop and adjusts values conditionally. Additionally, I added styling to the font to clearly differentiate between the two <Container> elements.

To address scalability concerns, like accommodating different themes, consider using ThemeProvider:

import React from "react";
import styled, { ThemeProvider } from "styled-components";

export default function App() {
  return (
    <>
      <ThemeProvider theme={ContainerHeader}>
        <Container>
          <h1>Very fancy h1 with flex display</h1>
        </Container>
      </ThemeProvider>
      <Container theme={"regular"}>
        <h1>Non-fancy h1 with no flex display</h1>
      </Container>
    </>
  );
}

const Container = styled.div`
  display: ${(props) => props.theme.display};
  & h1 {
    font-family: ${(props) => props.theme.h1Font};
  }
`;

Container.defaultProps = {
  theme: {
    display: "block",
    h1Font: '"Arial Black", Gadget, sans-serif'
  }
};

const ContainerHeader = {
  display: "flex",
  h1Font: '"Courier New", Courier, monospace'
};

Explore the solution further on CodeSandbox: https://codesandbox.io/s/stack-conditional-styled-components-vmnpn?file=/src/App.js:0-773

Answer 3

Answer №2

After some exploration, I think I've stumbled upon the solution to my query (I'll keep this question open for a few more days just in case there are further enhancements).

To apply styles efficiently, you can utilize the "global" flag with styled JSX and incorporate extra class names in the component using props.className.

Here's an example of a Parent Container component utilizing props.className:

const Container = (props) => (
    <>
        <div className={`container ${props.className}`}>
            {props.children}
        </div>

        <style jsx>{`
            .container{
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
            }
        `}</style>
    </>
)

export default Container;

Subsequently, when implementing this component, you can extend the styles even further with the global flag within <style jsx>:

Example of the Container being utilized and styled elaborately within the header:

import Container from './Container';

const Header = (props) => (
    <>
        <header>
            <Container className="header-col">

                <div>
                    <h1>{props.title}</h1>
                </div>


                <nav>
                    <ul>
                        <li>Hello</li>
                        <li>There</li>
                    </ul>
                </nav>
            </Container>
        </header>

        <style jsx global>{`
            .header-col{
                display: flex;
                justify-content: space-between;
            }
        `}</style>
    </>
)

export default Header;

While not flawless, the method is quite effective in my view:

The global flag extends your styles globally, allowing other components to access these styles (from what I've observed)
Ensure that your components accept props.className to add further class names for this global style

Answer 4

After some exploration, I think I've stumbled upon the solution to my query (I'll keep this question open for a few more days just in case there are further enhancements).

To apply styles efficiently, you can utilize the "global" flag with styled JSX and incorporate extra class names in the component using props.className.

Here's an example of a Parent Container component utilizing props.className:

const Container = (props) => (
    <>
        <div className={`container ${props.className}`}>
            {props.children}
        </div>

        <style jsx>{`
            .container{
                width: 100%;
                max-width: 1200px;
                margin: 0 auto;
            }
        `}</style>
    </>
)

export default Container;

Subsequently, when implementing this component, you can extend the styles even further with the global flag within <style jsx>:

Example of the Container being utilized and styled elaborately within the header:

import Container from './Container';

const Header = (props) => (
    <>
        <header>
            <Container className="header-col">

                <div>
                    <h1>{props.title}</h1>
                </div>


                <nav>
                    <ul>
                        <li>Hello</li>
                        <li>There</li>
                    </ul>
                </nav>
            </Container>
        </header>

        <style jsx global>{`
            .header-col{
                display: flex;
                justify-content: space-between;
            }
        `}</style>
    </>
)

export default Header;

While not flawless, the method is quite effective in my view:

The global flag extends your styles globally, allowing other components to access these styles (from what I've observed)
Ensure that your components accept props.className to add further class names for this global style

When working with styled components, how can I effectively apply different styles using two layers of class names within the component declaration?

Answer №1

Answer №2

Similar questions

Leveraging environment variables in a 'use client' module within a Next.js application

Stay tuned for Quasar's input validation event notifications

What is the best way to handle HTML files that have the same name as folders?

Sending react table information to react modal

Customize MUI Tabs to resemble the design of Bootstrap Nav Tabs

Change the order of the table data elements using the nth-child CSS selector

Utilizing CSS to Properly Position HTML Elements

Do we really need to create our own action creators in Redux Toolkit?

Custom-designed foundation UI element with a parameter triggers TypeScript issue

Execute a nested package.json script

What steps can be taken to address the issue of missing headers error and ensure proper validation of

What is the best way to incorporate a CSS transition without any dynamic property changes?

What are some React component libraries compatible with Next.js 13.1?

The conditional statement to check for an empty object does not trigger any actions

A step-by-step guide on clearing a TextInput programmatically with the help of

Looking to design an interactive grid for generating dynamic thumbnails

Guide to stacking blocks on top of each other

ReactJs route path with specific id parameter results in displaying the wrong components

Do I still need to include getStaticPaths if I am already utilizing Link within the HTML in getStaticProps?

Troubleshooting why SCSS styling is not properly applying to the active class in Next.js