你如何为渲染的 React 组件的包含 div 设置样式

Question

我在 Div 中有一个通过 react 呈现的值列表（在称为 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>

  );

};

我想像这样使用 materialize 设置输出样式

   <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();

  };

Answer 1

使用 Bootstrap：将它包含在 npm 之后的 index.js 文件中。Inline-CSS ：您可以创建包含 CSS 的对象，将其添加到样式标签 =>style={customCss}。在传递时传递 CSS：timeout={500}。而不是 500，传递 CSS 对象

Answer 2

我不确定你到底想用代码做什么，但一个简单的解决方案是编写一个样式组件，例如const StyledDiv = styled.div`&nbsp; background-color: red;&nbsp; a {&nbsp; &nbsp; color: blue;&nbsp; }`;然后，无论您在何处创建 div，都只需使用StyledDiv...这里有更多好的信息：https : //www.styled-components.com/