Javascript 如何设置渲染组件的包含div的样式

我有一个通过react（在名为cardItem的组件中）呈现的div中的值列表。我想对包含所有渲染行的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>
  );
};

返回(
{current.title}
{当前。_id}

{cards！==null&&！正在加载(
{已筛选！==null
？已过滤的.map（卡=>(
))
：cards.map（卡片=>(
))}
) : (
)}
);
};

我想用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>

羊毛衫的成分在这里

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;

import React，{useContext}来自“React”；
从“道具类型”导入道具类型；
从“../../context/card/CardContext”导入CardContext；
常数项=（{card}）=>{
const cardContext=useContext（cardContext）；
const{deleteCard，setCurrentCard，clearCurrentCard}=cardContext；
const{u id，label，summary，creatorId，documentId，linkUrl}=card；
const onDelete=（）=>{
删除卡（_id）；
clearCurrentCard（）；
};
返回(
setCurrentCard（卡）}>
onDelete（卡）}>
);
};
CardItem.prototype={
卡片：PropTypes.object.isRequired
};
导出默认项；

使用引导：在npm之后将其包含在index.js文件中

内联CSS：您可以创建包含CSS的对象，并将其添加到style标签=>style={customCss}

---

在传递CSS时传递：timeout={500}。不是500，而是传递CSS对象

我不确定你到底想用代码做什么，但一个简单的解决方案是编写一个样式化的组件，例如

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

然后，无论您在何处创建div，只需使用

StyledDiv

---

这里有更多的好信息：

请分享CardItem组件的代码。如果你想设置样式

CardItem

，你可以在组件中导入一个样式文件并使用它。我已经包含了card item组件。嗨，Harsh，我不确定我是否已经根据你的建议制定出了相应的操作方法。我尝试将containerItemStyle设置为与样式匹配的变量，但没有成功。我没有这样做。现在在CSTransition组件中，在标记中使用类似这样的样式={customStyle}。感谢我对TranssitionGroup组件进行了样式设置，然后它就工作了