你如何为渲染的 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`

  background-color: red;

  a {

    color: blue;

  }

`;

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

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