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”元素仅限于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'

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

3 个答案: