Tips for applying various CSS properties to a single element using styled-components

Is there a way to style similar elements differently using different CSS properties in styled components? For example:

<div></div>
<div></div>

With the knowledge I have, I can do:

 export const StyledDiv = styled.div`
color: red;
`

And change <div></div> to 

<StyledDiv></StyledDiv>
. But what if I want each of these divs to have different styles? For instance, one with blue color and another with red. These 2 elements are just examples to illustrate the concept. Now imagine a page with dozens of divs, each requiring a unique style. How would you approach this effectively?

javascripthtmlcssreactjsstyled-components

Answer №1

To incorporate props into the styled component, you can follow this approach:

const StyledWrapper = styled.div`
  background-color: ${props => props.backgroundColor};
`;

Then, when using the component:

  return <StyledWrapper backgroundColor="blue">...</div>;

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

AngularJS uses double curly braces, also known as Mustache notation, to display

I'm currently working on a project where I need to display an unordered list populated from a JSON endpoint. Although I am able to fetch the dictionary correctly from the endpoint, I seem to be facing issues with mustache notation as it's renderi ...

javascripthtmlangularjsjson

Animate the transition between the icon and extended variant in Material-UI FAB

If you have a Material-UI FAB with the following code: <Fab size="medium" color="primary" aria-label="add"> <AddIcon /> </Fab> And you want to toggle to this other state: <Fab var ...

cssreactjsmaterial-ui

The ValidationMessageFor tag is failing to function on the view page

I am currently in the process of updating the styling from bootstrap 3 to bootstrap 5. The issue I am facing is that in the bootstrap 3 version, when I click the "save" button without filling any text boxes, the page displays a validation message like this ...

javascriptc#asp.net-mvctwitter-bootstrap-3bootstrap-5

Guide to executing API PATCH request on the server for a system that approves outings?

I have developed a system for approving outings using the MERN Stack. I wrote code to change the leave status to "Approved", but the changes are not saved when I refresh the page. The PATCH request works fine through Postman. Mongoose Schema Snippet for l ...

javascriptnode.jsmongodbmongoosecrud

Apply a new class to an element's id using jQuery

Looking for a way to change the plus symbol to a minus symbol when clicked in my HTML code. <div class="col-3"> <a href="#tab-1"> <span class="plus" data-tab="tab-1">+</span> </a> </div> <div class="col-3"> & ...

jqueryhtml

Can a React Class Component utilize a Modal feature successfully?

I need help with rendering a single draft in my modal without redirecting to another component. I can display the draft, but it redirects me due to the Link element. However, if I remove the Link, I lose the draftId in the URL. Here's a snippet of my ...

node.jsreactjsreact-reduxreact-routermaterial-ui

Unable to populate an array with a JSON object using Angular framework

Here is the JSON object I have: Object { JP: "JAPAN", PAK: "PAKISTAN", IND: "INDIA", AUS: "AUSTRALIA" } This JSON data was retrieved as a response from an HTTP GET request using HttpClient in Angular. Now, I want to populate this data into the following ...

javascriptarraysjsonangulartypescript

Show different text or letter when hovering

Is there a way to hide one letter and display another in a link, with a different style on hover? For example: This is a... ...regular link. And this is a... ...hovered link. Any ideas on how to make this happen? Thank you. Edit: Just to clarify — ...

jquerycsseffect

How can a div be positioned outside of an overflow scroll without resorting to absolute positioning?

I am currently designing a blog theme and I would like to include a small box that displays the post date offset to the left of each post, similar to this mockup: My issue arises because the post container has overflow scrolling enabled, making it difficu ...

htmlcssoverflow

Ensure that background elements do not become the focus when using MUI backdrop

Currently, we are implementing screen dimming when a custom dialog is open using MUI backdrop. However, even though the screen is "grayed-out," users can still access the items with the keyboard. In the image below, you can see how I move from "show backd ...

javascriptreactjsmaterial-uifocus

Flashing bug in the outFunction of jquery hover()

My friends and I are working on a website for a class project, but we're running into a strange issue with the outFunction part of our hover function. Whenever the mouse hovers over an element, a grey square fades in using .fadeIn(), but then immediat ...

javascriptjqueryhtml

Summing Values with Linq.js Filter

Can you apply a filter in Linq.JS using SUM? This is my attempt: var query = Enumerable .From(self.data()) .Where("$$.Sum($.percent) > 100") .ToArray(); Issue encountered: linq.js: Uncaught TypeError: $$.Sum is ...

javascriptlinq.js

The backend is not receiving the AJAX post, which utilizes dynamically-generated JSON

I'm relatively new to Bootstrap and frontend development in general. On a page I'm working on, there's a table that displays various configurations to the user. Each row has a Change button that triggers a modal popup when clicked. Here&apos ...

javascriptjqueryajaxtwitter-bootstrap

What is the best way to assign attributes to multiple HTML elements using an array?

Seeking assistance to hide various sections in my HTML file upon button click, with the exception of one specific section. Encountered an error message: Uncaught TypeError: arr[i].setAttribute is not a function Here's a snippet of my code: const hide ...

javascripthtml

Tips for minimizing padding and margin in a Bootstrap template

I recently downloaded the page from "https://getbootstrap.com/docs/5.3/examples/heroes/", and I've removed all sections in index.html except for the "hero" section and the "sign-up form". However, there is too much white space between these two elemen ...

cssbootstrap-5paddingmarginfont-size

Dropdown in Angular JS is displaying incorrect values in the options

I am a newcomer to AngularJS and encountering an issue with populating a dropdown. Within a foreach loop of data retrieved from the server, I have created an array of user data: $scope.Users.push( { userid: ...

javascriptjqueryangularjs

Incorporate a Google Chart link by integrating it with a select handler

I'm facing an issue while trying to open a link in a Google line chart using the selection handler. The chart stops rendering, and as a newcomer to javascript, I'm unsure why. This is how the code is integrated into my HTML: <pre><code ...

javascriptchartsgoogle-visualizationselectionlinechart

Issue with React Google Maps API - Error: Uncaught TypeError: Unable to access property 'getCenter' of null

While browsing through Codesandbox, I stumbled upon this helpful example: https://codesandbox.io/s/ir5ks The example is quite similar to what I require for my project, but I'm encountering an error that seems to be persistent. Despite copying the cod ...

reactjsgoogle-mapstypeerror

What is the best way to achieve a sliding effect in React and Material-UI where one element slides in as the other slides out?

Within a React environment, I have implemented two elements wrapped in a slide: <div className={classes.wrapper}> <Switch checked={checked} onChange={this.handleChange} aria-label="Collapse" /> &l ...

reactjscss-transitionsmaterial-uireactcsstransitiongroup

Error: Unused variable: '_' has been declared but not utilized

While working on my Next.JS project with TypeScript, I encountered an issue when trying to run the build. The error message stated: Type error: '_' is declared but its value is never read. I attempted to resolve this by setting "noUnusedLocals" ...

reactjstypescriptnext.js