Breaking News: Grepper is joining You.com. Read the official announcement!

refering to another styled components

Marwen Labidi answered on December 7, 2021 Popularity 9/10 Helpfulness 4/10

answer refering to another styled components

related how to use in styled components the same settings of another element

refering to another styled components

Comment

const Link = styled.a`
  display: flex;
  align-items: center;
  padding: 5px 10px;
  background: papayawhip;
  color: palevioletred;
`;

const Icon = styled.svg`
  flex: none;
  transition: fill 0.25s;
  width: 48px;
  height: 48px;

  ${Link}:hover & {
    fill: rebeccapurple;
  }
`;

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript styled-components

Link to this answer
Share Copy Link

Contributed on Aug 27 2022

Marwen Labidi

0 Answers Avg Quality 2/10

Closely Related Answers

how to use in styled components the same settings of another element

Comment

import styled, { css } from ‘styled-components’;

const baseInputStyles = css`
  padding: 0.5em;
`;

const StyledA = styled.a`
  ${baseInputStyles}
`;

const StyledButton = styled.button`
  ${baseInputStyles}
  /* make changes as needed*/
`;

Popularity 10/10 Helpfulness 4/10 Language typescript

Source: stackoverflow.com

Tags: element

Link to this answer
Share Copy Link