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

The lack of a defined theme in the makeStyles for @mui/styles sets it apart from @material-ui/core

Instructions on how to create a custom datepicker in material ui that opens when a textfield is

Utilizing React-hook-Form to transfer data between two SelectBoxes

Incorrect rendering of the <li> tag

I am looking to extract solely the numerical values

Allow only specific inner divs to dictate the width of the outer div

Importing .js files from the static folder in Nuxt.js: a step-by-step guide

How to retrieve data in a server-side module

Aligning text in the middle of two divs within a header

What is the method for transmitting a concealed attribute "dragable" to my component?

Accordion menu with smooth CSS3 transitions

Is it possible to modify the background color of a checkbox?

Focus on an empty <input> tag with just the type attribute

Utilizing the after pseudo element for an active selector in CSS

Only one div is revealed by Jquery show and hide, while the other remains hidden

The utilization of CSS variables within intricate properties

I'm having trouble centering the links in my navigation bar using flexbox, and I'm not sure how to fix it

Developing several sliders and ensuring they operate independently of each other

MUI: Interaction with a button inside a MenuItem when not interacted with MenuItem itself?

Updating borderWidth dynamically in react native fails to produce the desired effect