Props and theme merge to create uniquely designed styled components with a thematic twist

Out of sheer curiosity, I've been incorporating styled-components into my React application. Within this framework, I make use of the recommended theme to ensure consistency in colors and sizes throughout.

Currently, my approach looks something like this: 

export const TestComponent = styled.div`
    color: ${({ theme }) => theme.white};
    background-color: ${({ theme }) => theme.white};
    border: 1px solid ${({ theme }) => theme.white};
    display: ${({ check }) => check ? 'block' : 'none'};
`;

Here, I'm tapping into the theme provided by the ThemeProvider, as well as performing an additional check based on an external component.

Moving forward, I find myself pondering why I can't simply do it like this instead: 

export const TestComponent = styled.div`${({ theme, check }) => (css`
    color: ${theme.white};
    background-color: ${theme.white};
    border: 1px solid ${theme.white};
    display: ${check ? 'block' : 'none'};
`)`;

Wouldn't this alternative method be more convenient and straightforward? If so, what might be preventing them from promoting this practice? I worry that there could be significant drawbacks associated with this approach that I'm failing to recognize at the moment.

cssreactjssassstyled-componentsemotion

Answer №1

Both approaches have their advantages, and I see no issue with either one. Personally, I have used the technique demonstrated in your first example extensively in a large React application without encountering any problems so far.

Having said that, the second example you provided is also completely valid. It's worth noting that you can achieve the same result without using the css helper:

const Test = styled.div`
  ${({ theme }) => `color: ${theme.white};`}
`;

In my experience, I tend to use the css helper to create reusable chunks of CSS code:

const fontSize = css`
  font-size: ${({ small, large, theme }) => {
    if (small) return `${theme.small}rem`;
    if (large) return `${theme.large}rem`;
    return `${theme.normal}rem`;
  }};
`;


const Test = styled.div`
  ${({ theme }) => `color: ${theme.white};`}
  ${fontSize}
`;

After defining these styles, you can use them like this:

<Test small>Hello World</Test>

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

What could be causing the audio file not to be received from the front end React to the Python server?

Here is the React code snippet: import React ,{ ChangeEvent, useState } from "react" const FileUpload: React.FC = () => { const [selectedFile, setFile] = useState<File| null>(null); const HandleAudioChange = (event:ChangeE ...

javascriptpythonreactjs

The page is not loading correctly until a refresh is done

My website seems to be displaying incorrectly on most browsers until the page is refreshed. Check it out here: I'm puzzled as to why this issue is occurring and why it resolves itself upon refresh (even without clearing the cache). The layout consis ...

htmlcsscss-float

The module 'safe-buffer' is not found by NPM

Ever since installing yarn, I've been unable to use npm. The upgrade for NodeJS went smoothly. Trying to remove npm is proving impossible. Every command I attempt results in the same error message: module.js:487 throw err; ^ Error: Cannot f ...

javascriptnode.jsreactjsnpm

Utilize Boostrap to stylishly incorporate an image within a DIV using CSS

I have a project with numerous HTML pages all containing the same elements. To make updating easier, I decided to call all images from the CSS files so that if an image needs to be changed, I only need to update the CSS file rather than each individual HTM ...

htmlcsstwitter-bootstrap

"Customizing the properties of an Angular Material mat-slide-toggle: A step-by-step

<mat-slide-toggle>Slide Me!</mat-slide-toggle> https://i.stack.imgur.com/p1hzD.png https://i.stack.imgur.com/aCzs1.png Is it possible to customize the toggle-thumb-icon to increase its length and position it at the end of the bar? ...

cssangularsassangular-material2angular8

Storing JSON data retrieved from an API into a class property using the fetch function: a step-by-step guide

I am faced with the challenge of communicating with a localhost API that I have created in my React application class. This API is responsible for returning a list of JSON data, and my goal is to store this data in a property. Having limited knowledge abo ...

jsonreactjstypescript

Mobile responsiveness issue with Bootstrap image heights

Creating a website with an image positioned at the top below the navigation bar. Utilizing Bootstrap 4 and CSS for this project. To ensure that the image spans the full width of the screen on larger devices, I employed background-image. For mobile devices, ...

cssimagemobilebootstrap-4height

React Hook Form – Difficulties with error handling when utilizing multiple forms simultaneously in react hook form version 7.5.2

Previously, in the earlier versions of react hook form, multiple forms could function if another form object was created using the following code: const { register: register2, handleSubmit: handleSubmit2, errors: errors2 } = useForm() H ...

javascriptreactjsformsvalidationreact-hook-form

Revitalize website when submitting in React.js

I need assistance with reloading my React.js page after clicking the submit button. The purpose of this is to update the displayed data by fetching new entries from the database. import React, {useEffect, useState} from 'react'; import axios from ...

javascriptreactjsaxiosuse-effect

jQuery Mobile is experiencing page height inaccuracies

My web application, built with jQuery Mobile 1.2.0, is encountering an issue with page height calculations on Windows Phone. While iOS and Android display correctly, there is a gap at the bottom of the page on Windows Phone. Is there a CSS-only solution t ...

javascriptjquerycsswindows-phone-7jquery-mobile

Creating a full-height page with collapsible content using Bootstrap 4 and flex

I'm attempting to create a collapsible div with a fixed height within a full-height page using flex and bootstrap 4 (also encountering the same issue with bootstrap 3). The current code snippet functions correctly on Firefox, but encounters a problem ...

csstwitter-bootstrapflexboxbootstrap-4

Is there a way to arrange the outcomes in a single line?

I need help displaying my results in three rows side by side in React/JavaScript using flexbox. Since I only have one CardItem, I can't just copy and paste it three times as it would show the same result in each row. Is there a way to achieve this wit ...

htmlcssreactjsreact-nativeflexbox

Has the zip creation tool in the Google Doodle on April 24th been coded entirely in JavaScript?

Was the Gideon Sundback Google doodle created using JavaScript? I attempted to follow along in Firebug, but I couldn't quite grasp its implementation details. Any ideas on how it was possibly implemented? Any insights on the potential techniques use ...

javascriptcssgoogle-doodle

Troubleshooting: TailwindCSS issues in Next.js 13 (with app directory)

I have recently updated to the latest version of tailwindcss. However, when I execute the command "npm run dev", tailwind only affects the fonts and nothing else. My current tailwind.config.js setup: /** @type {import('tailwindcss').Config} */ ...

reactjsnext.jstailwind-csspackage.jsonapp-folder

The React-Toastify module is missing

Having issues with react toast plugin displaying an error. Prior to attempting to use the toast feature, I executed this command: npm install --save react-toastify The following error is being shown in Google Chrome Console: ERROR in ./src/Pages/Login ...

javascriptreactjs

Is there a way to make a sass file universally accessible without having to import it into every file and causing an increase in bundle size?

Question How can I efficiently import variables.scss globally without the need to duplicate them in every file and reference them in my build instead of importing? Setup I am using Vue2 with laravel-mix, where I have imported index.scss in my main.js ...

cssvue.jswebpacksasslaravel-mix

React JS for loop not displaying any output

I am trying to create a component that loops from 0 to the value entered as a prop. if (props.number !== "" && props.toPow !== "") { for (let i = 0; i < props.toPow; i++) { return ( <div> & ...

javascriptreactjsjsx

Struggling to close the dropdown with jquery

Check out this code snippet: https://jsfiddle.net/rajat_bansal/rtapaew5/1/ The jQuery section below is causing some trouble: $(document).ready(function(e) { $(".sub-handle").click(function() { if(!$(this).hasClass('showing-sub&ap ...

jqueryhtmlcssweb

Steps for automatically retrying a failed expect statement in Jest

In my React application, I am utilizing Jest for performing unit testing. One aspect of my application involves a Material UI date picker with next and previous buttons. The selected date is displayed in the browser URL. Each time the user clicks on the ne ...

javascriptreactjsjestjsmaterial-uireact-testing-library

Tips for concealing broken images in jQuery/JavaScript when generating dynamic content

Is there a way to hide the broken images in this dynamically generated HTML code using JavaScript? Unfortunately, I don't have access to the source code itself. I'm new to JQuery and could really use some assistance. Below is the snippet of the ...

javascriptjqueryhtmlcssimage