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

我正在尝试在我的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;

从“React”导入React；
常量菜单=（）=>(

A
B
C
D

)
常量样式={
listStyle:'无'，
}
导出默认菜单；

我想对“li”元素应用一些样式，但是如何不为每个“li”元素编写style={style}呢？例如，display:inline用于纯javascript中的所有“li”元素

附言：我知道文章和参考资料（我读了很多），请不要包括答案之类的来源，因为这对我真的没有帮助

---

提前感谢。

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

例如：在file.css中：

li {
  font-size: 20
}

在file.js中：

import './file.css'

---

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

例如：在file.css中：

li {
  font-size: 20
}

在file.js中：

import './file.css'

你可以使用 实现你想要的。镭提供了一种能量 组成部分

样式组件

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

没有组件，在React中编写元素非常困难。要编写一个普通元素， 您需要将CSS作为多行字符串写入 要素简化此过程，并添加前缀和 能够使用范围选择器

如果包含范围选择器，则可以包含应应用于该选择器以及任何嵌套选择器的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>
);

const菜单=（）=>(

A
B
C
D

);

另一种方法是使用

const StyledLi=styled.li`
颜色：红色；
`;
常量样式菜单=（）=>(

1.
2.
3.
4.

);

您可以在以下位置看到它：

您可以使用 实现你想要的。镭提供了一种能量 组成部分

样式组件

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

没有组件，在React中编写元素非常困难。要编写一个普通元素， 您需要将CSS作为多行字符串写入 要素简化此过程，并添加前缀和 能够使用范围选择器

如果包含范围选择器，则可以包含应应用于该选择器以及任何嵌套选择器的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>
);

const菜单=（）=>(

A
B
C
D

);

另一种方法是使用

const StyledLi=styled.li`
颜色：红色；
`;
常量样式菜单=（）=>(

1.
2.
3.
4.

);

---

您可以在以下位置观看直播：

您可以这样做：

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

const Li=（道具）=>{
常量样式={
listStyle:'无'，
}
返回
{props.text}
}
常量菜单=（）=>{
返回(


)
}

您可以这样做：

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

const Li=（道具）=>{
常量样式={
listStyle:'无'，
}
返回
{props.text}
}
常量菜单=（）=>{
返回(


)
}

Temani Afif谢谢，但我已经读了几篇文章，没有找到我具体问题的答案。Temani Afif谢谢，但我已经读了几篇文章，没有找到我具体问题的答案。谢谢，但这不是我想要的。如果可能的话，我想纯粹用javascript实现这个特殊的样式。我回答了你的问题：“我想对“li”元素应用一些样式，但是如何不为每个“li”元素编写style={style}？”：）啊。。所以剩下的问题并不重要。可以我将用粗体更新我的问题，以便其他人能清楚地理解。谢谢，但这不是我想要的。如果可能的话，我想纯粹用javascript实现这个特殊的样式。我回答了你的问题：“我想对“li”元素应用一些样式，但是如何不为每个“li”元素编写style={style}？”：）啊。。所以剩下的问题并不重要。可以我将用粗体更新我的问题，以便其他人能清楚地理解。是的，这也是Hardik Modha答案的另一种选择。也谢谢你。：）是的，这也是Hardik Modha答案的另一种选择。也谢谢你。：）不客气。我已更新我的答案，以包含另一个备选答案。：）不客气。我已更新我的答案，以包含另一个备选答案。：）