reactjs 我想为元素中的每个div设置样式

y1aodyip 于 2023-03-29 发布在 React

关注(0)|答案(1)|浏览(159)

我想在我的元素中使用'&〉div'来设置每个div的样式，但它不起作用。有人能解释一下吗？
这是类中的样式对象

const styles = {
    container: {
        display: 'flex',
        flexFlow: 'column',
    },
      informationPage: {
        marginTop: '70px',
      },
      grid: {
        '& > div': { backgroundColor: 'blue' },
        textAlign: 'center',
          display: 'grid',
          gridGap: '10px',
          gridTemplateColumns: 'repeat(3, 400px)',
          gridTemplateRows: 'repeat(3, 400px)',
      },
  };

这是包含多个div的组件，我正尝试样式化

return (
    <div className="HomePage">
        <div style={styles.container}>
            <span>
                <ToolBar/>
            </span>
            <span style={styles.informationPage}>
                <Title/>
            </span>
            <div style={styles.grid}>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
                <div>1</div>
            </div>
        </div>
    </div>
  );

我怎么能在不给每个div一个style属性的情况下实现这一点呢？我已经在网上看过了，在其他解决方案上没有运气。

reactjs

来源：https://stackoverflow.com/questions/75845045/i-want-to-style-each-div-within-an-element

1条答案

按热度按时间

92dk7w1h1#

CSS的通配符是星号，所以将&更改为*，但我建议您使用类而不是元素。
其他事项：

title不是一个很好的元素名，有时候不能正确显示（参见示例）
我放了一些类进去，并添加了一些边框和背景，只是为了谁是什么。
我不喜欢使用px-所有现代浏览器默认为16px字体大小，所以1rem = 16px，所以在这里我强迫它;然后我们可以使用rem和em，这将在响应式布局上更好地流动。

gridTemplateColumns: 'repeat(3, 400px)', gridTemplateRows: 'repeat(3, 400px)',
下面是一个例子：

body {
  font-size: 16px;
}

.home-page .container {
  display: flex;
  flex-direction: column;
  background-color: #ffff0033;
}

.home-page .container>* {
  border: solid #00ff00 1px;
  padding: 0.25rem;
}

.my-grid {
  display: grid;
  grid-template-columns: repeat(3, 5rem);
  grid-template-rows: repeat(3, 3rem);
  border: solid 1px red;
  grid-gap: 1rem;
  font-size: 2rem;
  color: white;
}

.my-grid>* {
  background-color: blue;
  border: white 2px solid;
  text-align: center;
}

<div class="home-page">
  <div class="container">
    <span> <toolbar>tools</toolbar> </span>
    <span class="information-things"><header>I have a header</header></span>
    <span class="information-things"><title>I have a title</title></span>
    <div class="my-grid">
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
      <div>1</div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-03-29

我来回答

reactjs 我想为元素中的每个div设置样式

1条答案

相关问题

热门标签

最新问答