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

我想像这样用物化样式设置输出

   <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的对象，然后将其添加到样式标签=> 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/

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

2 个答案: