Tips on replacing a React component's styling with emotion CSS

Is there a way to incorporate the background-color:green style to the <Test/> component in the following example without directly modifying the <Test/> component?

/** @jsx jsx */
import { css, jsx } from "@emotion/core";
import React from "react";


const Test = () => (
    <div
        css={css`
            height: 100px;
            width: 100px;
            background-color: aqua;
        `}
    >
        Text
    </div>
);

const App = () => (
    <Test
        css={css`
            height: 400px;
            width: 400px;
            background-color: green;
        `}
    />
);

Answer №1

Experiment should utilize the className attribute provided by a css-in-js library (such as emotion):

function Experiment({ className }) {
  return (
    <div
      className={className}
      css={css`
        height: 100px;
        width: 100px;
        background-color: aqua;
      `}
    >
      Text
    </div>
  );
}

Thus:

// Will apply the styling defined in the `Experiment` component by default
<Text/>

// Will use the specified styling and override the default where applicable, 
// or include additional styling.
// For example, using background-color will override it
// while using border-color will *add* a style
<Text css={...}/>

// Similar to the above, often used with external CSS.
<Text className="someOtherCss" />

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

"Customize the appearance of your theme by adjusting the background and text colors when making a

Is there a way to dynamically change the style of a webpage based on user selection using CSS in AngularJS? I've searched online, but haven't found a solution that works for me. I have a CSS file with different styles and I want to apply these ...

Heroku deployment unable to refresh node modules after git push

Can someone assist me with a problem I'm encountering while trying to deploy my project on Heroku? The issue revolves around my utilization of "react-animations" and the customization I've applied to a particular animation within the library. Ess ...

Is it possible to maintain consistent tick sizes on recharts axis without compromising the maximum value?

My data array is structured as shown below and I am looking to present it in a specific way using recharts. const severityExampleData: any = [ {symptom_type: 'chest pain', mild: 1, moderate: 2, severe: 1, total: 4}, {symptom_type: 'p ...

What specific files are required to be placed in the src folder when setting up flow?

I am currently trying to set up flow in my project by following the steps outlined in the official documentation available here. However, I have hit a roadblock at the specific step that instructs users to execute the following command: If you then put ...

Moving elements upwards and downwards using CSS transitions

I am currently designing a metro tiles menu for my website, without using JavaScript and only relying on HTML and CSS. The issue I am facing involves the sliding tiles and the direction in which they slide. Additionally, there seems to be a problem where ...

React Error: The property 'i' cannot be read as it is undefined

I am encountering an issue with my code: class Albs extends React.Component{ constructor(props){ super(props); this.state = { i: 0, anh: this.props.hinhanh[this.state.i] }; var hinhanh = ["1.png", "2.png", "3.png"]; this. ...

Changes in state do not reflect updates to the React styling

I'm experiencing issues with a simple React element that should adjust its style based on screen size, but for some reason, it's not updating as expected. Check out the code snippet below: export class DashboardHContainer extends Component { c ...

Expand Bootstrap navbar search box outside collapse menu

Currently, I am working on designing a navigation bar that showcases my brand on the left side, a full-width search bar in the center, and additional pages on the right. I am facing challenges in maintaining the full-width of the search bar without causing ...

Keep the division visible once the form has been successfully submitted

Initially, I have created 3 divs that are controlled using input type buttons. These buttons serve the purpose of displaying and hiding the hidden divs. Within these divs, there are forms to store data. Currently, my goal is to ensure that the div that was ...

What are the advantages of using useEffect without a dependency array?

As we know, utilizing useEffect without a dependency array will trigger on each render. However, this is similar to the direct inclusion of code within the component. So, what's the rationale for using it? One scenario that comes to mind is making u ...

Tooltips will display on all Nivo charts except for the Nivo Line chart

I'm having an issue with nivo charts where the tooltip isn't showing up for my line chart. Even after copying and pasting the example from here: Other chart examples work fine with tooltips appearing, but for some reason, it's just not work ...

Setting constraints for table size with min-width and max-height

I have a coding dilemma involving the min-width and max-height properties in my table. The issue arises when I try to set these properties on the td element – they are being ignored by the browser. If I nest a div with the properties inside a td, the con ...

Encountering difficulties while attempting to install the redux-devtools-extension in a React project

https://i.stack.imgur.com/ooR4j.png I encountered some issues during the installation of redux-devtools-extension using npm in my react-redux-django project. ...

Ways to properly position an image within a Grid component in React Material UI

I recently worked on customizing the footer design for my project. I utilized Material UI grid to structure the footer, but faced an issue with right padding for the logo placement. Here is a screenshot showcasing the problem (logo blurred for privacy): h ...

JavaScript Calculator experiencing difficulty with adding two numbers together

I've been working on developing a calculator using HTML and JavaScript, but I'm facing an issue when trying to add two numbers together. Strangely enough, when attempting to calculate 1 + 0, I get the result of 512, and for 1 + 1, it returns 1024 ...

How can a server component be rendered conditionally based on the state set in the client component?

Currently, I am working on implementing a tailwinds css template sidebar that updates the main div with components based on the active sidebar tab. To achieve this functionality, I need to utilize state to determine which sidebar tab is currently active. I ...

Create a dynamic image positioned alongside text specifically designed for mobile devices

One of my challenges involves implementing a responsive image in Bootstrap (3.3.7): <div class="col-sm-2 text-center"> <img class="img-responsive center-block " src="img/1.png" style="max-width: <p>I would like to include some gua ...

Enhanced Organic Draping/Drifting

Currently working on creating a basic thumbnail gallery where clicking on a thumbnail expands it to one of three sizes (square, vertical, or horizontal). However, facing the issue where expanded pictures maintain their original order instead of filling emp ...

Why isn't the input appearing on the succeeding line below?

<label for="email2">Enter Your Email Address</label> <input type="text" name="email2" id="email2" placeholder="example: [email protected]"> <label for="phone2">Phone Number</label> <input type="text" name="phone2" id= ...

Having trouble getting the sass lighten functions to work properly with a variable

Currently incorporating SASS into my project, Below is the snippet of my variable code :root, [data-theme="default"] { --text-color: #383143; } $text-color: var(--text-color); Utilizing the variable with a lighten function as shown below, body { ...