React 中的内联 CSS - 如何设置多个 li 元素的样式

Question

我正在尝试在我的 React 组件中添加一些内联 CSS 样式。我知道优缺点和所有花哨的库，但我对这个具体案例很好奇。

这是代码：

import React from 'react';

const Menu = () => (
    <ul style={styles}>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
    </ul>
)

const styles = {
    listStyle: 'none',
}

export default Menu;

我想为“li”元素应用一些样式，但是如何在不为每个“li”元素编写 style={styles} 的情况下做到这一点？例如，所有“li”元素的 display:inline 纯在 javascript 中？

P.S.：我知道文章和资源（我读了很多），请不要包含答案等资源，因为它对我真的没有帮助。

提前致谢。

Answer 1

您可以使用Radium 达到你想要的。镭提供了一个 Style 零件。

样式组件

组件呈现一个包含一组 CSS 规则的 HTML 标记。使用它，您可以定义一个可选的 scopeSelector 结果元素中的所有选择器都将包括在内。

没有组件，在 React 中编写元素非常困难。写一个普通的元素， 你需要把你的 CSS 写成一个多行字符串 元素。简化了这个过程，并添加了前缀和 范围选择器的能力。

如果您包含 scopeSelector，您可以包含应该应用于该选择器以及任何嵌套选择器的 CSS 规则。为了 例如，以下

示例直接取自自述文件。

<Style
  scopeSelector=".scoping-class"
  rules={{
     color: 'blue',
     span: {
       fontFamily: 'Lucida Console, Monaco, monospace'
     }
  }}
/>

所以对于你的情况，它会是，

const Menu = () => (
  <div>
    <Style
      scopeSelector="li"
      rules={{
         color: "yellow"
      }}
    />
      <ul>
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
      </ul>
  </div>
);

另一种方法是使用styled-components

const StyledLi = styled.li`
   color: red;
`;

const StyledMenu = () => (
  <ul>
    <StyledLi>1</StyledLi>
    <StyledLi>2</StyledLi>
    <StyledLi>3</StyledLi>
    <StyledLi>4</StyledLi>
  </ul>
);

您可以在以下位置看到它：https://codesandbox.io/s/29j6131jp

Answer 2

你可以这样做：

const Li = (props) => {
    const styles = {
        listStyle: 'none',
    }
    return <li style={styles}>{props.text}</li>
}

const Menu = () => {
  return (
    <ul>
        <Li text="A" />
        <Li text="B" />
        <Li text="C" />
        <Li text="D" />
    </ul>
  )
}

Answer 3

定义一个 css 文件，您将在其中设置 li 的样式，并包含在 .js 文件中。

例如：在file.css中：

li {
  font-size: 20
}

在 file.js 中：

import './file.css'