Combine one CSS property in Emotion

Question

Combine one CSS property in Emotion

Having some trouble creating reusable animations with Emotion. I've defined a fadeUp animation that works well:

export const animatedFadeUp = css`
  opacity: 1;
  transform: translateY(0);
`;

export const fadeUp = css`
  opacity: 0;
  transform: translateY(var(--spacing-medium));
  transition: opacity 0.5s ease-in-out,
    transform 0.5s ease-in-out;

  html.no-js & {
    ${animatedFadeUp}
  }
`;

However, when applying the fadeUp animation to an element already with its own transitions, it gets overridden. Like in the case of this button:

const Button = styled.button`
  ${fadeUp}
  background: orange;
  transition: background-color 0.5s ease-in-out;

  &:hover,
  &:focus {
    background: gold;
  }
`;

Is there a way to combine only one property? Perhaps like this:

const Button = styled.button`
  ${fadeUp}
  background: orange;
  transition: ${fadeUp.transition},
    background-color 0.5s ease-in-out;

  &:hover,
  &:focus {
    background: gold;
  }
`;

javascript css reactjs emotion

Answer 1

Answer №1

Instead of utilizing CSS tagged template literals or styled components, consider using it as a CSS object. This approach offers more flexibility and makes it easier to reference their properties.

<p
  css={{
    color: 'red'
 }}
>Hello World</p>

Your code would then look like this:

export const animatedFadeUp = {
  opacity: 1,
  transform: 'translateY(0)',
};

export const fadeUp = {
  opacity: 0,
  transform: 'translateY(var(--spacing-medium))',
  transition: `opacity 0.5s ease-in-out,
    transform 0.5s ease-in-out`,

  ['html.no-js &']: {
    ...animatedFadeUp
  }
};

const App = () => (
  <button
    css={{
      ...fadeUp,
      background: 'orange',
      transition: `${fadeUp.transition},
        background-color 0.5s ease-in-out`,

      ['&:hover']: {
        background: 'gold',
      },
      ['&:focus']: {
        background: 'gold',
      }
    }}
  >Click Me</button>
)

Answer 2

Instead of utilizing CSS tagged template literals or styled components, consider using it as a CSS object. This approach offers more flexibility and makes it easier to reference their properties.

<p
  css={{
    color: 'red'
 }}
>Hello World</p>

Your code would then look like this:

export const animatedFadeUp = {
  opacity: 1,
  transform: 'translateY(0)',
};

export const fadeUp = {
  opacity: 0,
  transform: 'translateY(var(--spacing-medium))',
  transition: `opacity 0.5s ease-in-out,
    transform 0.5s ease-in-out`,

  ['html.no-js &']: {
    ...animatedFadeUp
  }
};

const App = () => (
  <button
    css={{
      ...fadeUp,
      background: 'orange',
      transition: `${fadeUp.transition},
        background-color 0.5s ease-in-out`,

      ['&:hover']: {
        background: 'gold',
      },
      ['&:focus']: {
        background: 'gold',
      }
    }}
  >Click Me</button>
)

Answer 3

Answer №2

Unfamiliar with the Emotion library, it is possible that an API exists allowing access to style values like ${fadeUp.transition}. However, if such an API does not exist, it may enhance the complexity of the library. Nevertheless, there is still hope to solve this issue using javascript language features without extensive knowledge of the API. Here is an example:

import React, { useState } from 'react';
import styled from '@emotion/styled';
import { css } from '@emotion/react';

export const animatedFadeUp = css`
  opacity: 1;
  transform: translateY(0);
`;

// A function is invoked immediately to obtain an object with properties `css` and `transition`
export const fadeUp = (() => {
  const transition = 'opacity 0.5s ease-in-out, transform 0.5s ease-in-out';

  return {
    css: css`
      opacity: 0;
      transform: translateY(25px);
      transition: ${transition};

      &.active {
        ${animatedFadeUp}
      }
    `,
    transition,
  };
})();

const Button = styled.button`
  ${fadeUp.css}
  background: green;
  transition: ${fadeUp.transition}, background-color 0.5s ease-in-out;

  &:hover,
  &:focus,
  &.active {
    background: gold;
  }
`;

function App() {
  const [className, setClassName] = useState('');

  return (
    <div className="App">
      <Button className={className}>This my button component.</Button>

      <button onClick={() => setClassName(className ? '' : 'active')}>
        Toggle
      </button>
    </div>
  );
}

export default App;

To summarize, we create an object containing information about the css and transition for future use. One drawback of this method is the need to specifically access fadeUp.css when using fadeUp, unlike other css created by emotion.

Answer 4

Unfamiliar with the Emotion library, it is possible that an API exists allowing access to style values like ${fadeUp.transition}. However, if such an API does not exist, it may enhance the complexity of the library. Nevertheless, there is still hope to solve this issue using javascript language features without extensive knowledge of the API. Here is an example:

import React, { useState } from 'react';
import styled from '@emotion/styled';
import { css } from '@emotion/react';

export const animatedFadeUp = css`
  opacity: 1;
  transform: translateY(0);
`;

// A function is invoked immediately to obtain an object with properties `css` and `transition`
export const fadeUp = (() => {
  const transition = 'opacity 0.5s ease-in-out, transform 0.5s ease-in-out';

  return {
    css: css`
      opacity: 0;
      transform: translateY(25px);
      transition: ${transition};

      &.active {
        ${animatedFadeUp}
      }
    `,
    transition,
  };
})();

const Button = styled.button`
  ${fadeUp.css}
  background: green;
  transition: ${fadeUp.transition}, background-color 0.5s ease-in-out;

  &:hover,
  &:focus,
  &.active {
    background: gold;
  }
`;

function App() {
  const [className, setClassName] = useState('');

  return (
    <div className="App">
      <Button className={className}>This my button component.</Button>

      <button onClick={() => setClassName(className ? '' : 'active')}>
        Toggle
      </button>
    </div>
  );
}

export default App;

To summarize, we create an object containing information about the css and transition for future use. One drawback of this method is the need to specifically access fadeUp.css when using fadeUp, unlike other css created by emotion.

Combine one CSS property in Emotion

Answer №1

Answer №2

Similar questions

The PhoneInputWithCountry component does not accept value changes through events

Tips for indicating which content to display on template literals

Transform your image using the Bootstrap framework

the present time plus a one-hour situation

I prefer my information to be arranged neatly and separated by spaces

Attempting to send a request from the front-end to the back-end is resulting in a 404 endpoint error

Modifying only specific state value in react-redux using the useDispatch function

How to extract various elements from a database array by utilizing .map within a React Component?

Is there a way to control the visibility of a bootstrap spinner using jQuery?

"Retrieve a specific object from a JSON file using NextJS based on its ID

Adding new fonts to an Angular 2 web page

Issue with ngStyle function in Internet Explorer

Encrypting data using NodeJS Crypto and decrypting it in front-end JavaScript

Define URL parameters within the ngResource framework

Is there a way to move the Autocomplete placeholder to a new line?

Setting the state object dynamically in React by using a variable name as an argument

What is the best way to display data from an object with changing properties in React.js?

Associating the object key and value with distinct attributes within the component

Is there a method to retrieve the data type along with the data using Sequelize?

There seems to be an issue with the functionality of updating and creating in Kendo