Как вы делаете условное зависание в стилизованных компонентах?

Question

Как вы делаете условное зависание в стилизованных компонентах?

Это статично, так что будет создан только один экземпляр, поэтому сколько угодно байтов для хранения одного элемента int будет выделено

0

javascript reactjs styled-components

задан Red Baron 18 January 2019 в 09:44

3 ответа

Другие вопросы по тегам:

javascript reactjs styled-components

Похожие вопросы:

score 0 · Answer 1

Вы можете сделать фон условным, исходя из того, какие реквизиты вы передаете. Ниже приведен пример, когда div изменяется в зависимости от множества различных условий.

const Container = styled.div`
  background: blue;

  &:hover {
    background: ${props => props.shouldHoverRed 
      ? 'red'
      : props.shouldHoverGreen
      ? 'green'
      : props.shouldHoverOrange
      ? 'orange'
      : 'blue'
    };
  }
`

по умолчанию синий, и в зависимости от пропущенного пропеллера, он будет отображать разные цвета для фона при наведении.

score 0 · Answer 2

Это работает для меня

import React from "react";
import ReactDOM from "react-dom";
import styled from "styled-components";
const Container = styled.div`
  & > h2 {
    &:hover {
      background: ${props => (props.shouldHover ? "red" : "none")};
    }
  }
`;
function App({ shouldHover }) {
  return (
    <Container shouldHover>
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic shappen!</h2>
    </Container>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App shouldHover />, rootElement);

Codesandbox

score 0 · Answer 3

Вы можете попробовать что-то вроде следующего, что может помочь:

import { css, styled } from 'styled-components'

styled.div`
   ${props => props.shouldHover && css`
      &:hover {
        background: 'red';
      }
   `}
`