你如何為渲染的反應組件的包含 div 設置樣式

Question

我在 Divs 中有一個通過反應呈現的值列表（在名為 cardItem 的組件中）。 我想為包含所有渲染行的 div 設置樣式，但我不知道該怎么做。

我嘗試為組件設置樣式-但這不起作用，例如

  return (
    <Fragment>
      <h2>{current.title}</h2>
      <p>{current._id}</p>
      {cards !== null && !loading ? (
        <TransitionGroup>
          {filtered !== null
            ? filtered.map(card => (
                <CSSTransition key={card._id} timeout={500}>
                  <CardItem card={card} />
                </CSSTransition>
              ))
            : cards.map(card => (
                <CSSTransition key={card._id} timeout={500} classNames='item'>
                  <CardItem id='MytestiedID' className='collection' card={card}  />
                </CSSTransition>
              ))}
        </TransitionGroup>
      ) : (
        <Spinner />
      )}
    </Fragment>
  );
};

我想像這樣實現 output 的樣式

   <div class="collection">
        <a href="#!" class="collection-item">Alvin</a>
        <a href="#!" class="collection-item active">Alvin</a>
        <a href="#!" class="collection-item">Alvin</a>
        <a href="#!" class="collection-item">Alvin</a>
      </div>

cardItem 組件在這里

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import CardContext from '../../context/card/cardContext';

const CardItem = ({ card }) => {
  const cardContext = useContext(CardContext);

  const { deleteCard, setCurrentCard, clearCurrentCard } = cardContext;

  const { _id, label, summary, creatorId, documentId, linkUrl } = card;

  const onDelete = () => {
    deleteCard(_id);
    clearCurrentCard();
  };

  return (
    <div className='flex-row collection-item'>
      <div>
        <a href={linkUrl} target='_blank'>
          {label}
        </a>
      </div>
      <div>
        <span>
          <button
            className='waves-effect waves-light btn-small'
            onClick={() => setCurrentCard(card)}>
            <i className='far fa-edit'></i>
          </button>
          <button
            className='waves-effect waves-light btn-small'
            onClick={() => onDelete(card)}>
            <i className='far fa-trash-alt'></i>
          </button>
        </span>
      </div>
    </div>
  );
};

CardItem.protoTypes = {
  card: PropTypes.object.isRequired
};

export default CardItem;

Answer 1

使用 Bootstrap：將其包含在 npm 之后的 index.js 文件中。

Inline-CSS：您可以創建包含 CSS 的 object 將其添加到樣式標簽 =>style={customCss}。

在傳遞時傳遞 CSS：timeout={500}。 而不是 500，通過 CSS object

Answer 2

我不確定你到底想用代碼做什么，但一個簡單的解決方案是編寫一個樣式化的組件，例如

const StyledDiv = styled.div`
  background-color: red;
  a {
    color: blue;
  }
`;

然后無論你在哪里創建你的 div 只需使用StyledDiv代替......

這里有更多好的信息： https://www.styled-components.com/