Inline CSS in React - how to style multiple li elements

Question

I am trying to do some inline CSS style in my React components. I am aware of pros/cons and all of the fancy libraries out there but I'm curious about this specific case.

This is the code:

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;

I want to apply some style to "li" elements, but how to do so without writing style={styles} for every single "li" element? For example, display:inline for all "li" elements purely in javascript?

P.S.: I'm aware of articles and resources (I read a lot of them), please, don't include such sources as answer, because it's really not helpful for me.

Thanks in advance.

codeburst.io/4-four-ways-to-style-react-components-ac6f323da822 — Temani Afif
– Temani Afif, Commented Apr 7, 2018 at 19:38
Temani Afif thanks, but I already read couple of articles and I didn't find the answer for my specific question. — MadMatt
– MadMatt, Commented Apr 7, 2018 at 19:41

Hardik Modha · Accepted Answer · 2018-04-07 20:50:04Z

2

You can use the Radium to achieve what you want. Radium provides a Style component.

Style Component

The component renders an HTML tag containing a set of CSS rules. Using it, you can define an optional scopeSelector that all selectors in the resulting element will include.

Without the component, it is prohibitively difficult to write a element in React. To write a normal element, you need to write your CSS as a multiline string inside of the element. simplifies this process, and adds prefixing and the ability to scope selectors.

If you include a scopeSelector, you can include CSS rules that should apply to that selector as well as any nested selectors. For example, the following

Example taken straight from the README.

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

So for your case, it would be,

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

Another way is to use styled-components

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

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

You can see it live at: https://codesandbox.io/s/29j6131jp

edited Apr 7, 2018 at 20:50

answered Apr 7, 2018 at 20:22

Hardik Modha

12.8k3 gold badges40 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hardik Modha Over a year ago

You're welcome. I've updated my answer to include the another alternative. :)

rozalex · Accepted Answer · 2018-04-07 20:25:44Z

2

You can do something like that:

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

answered Apr 7, 2018 at 20:25

rozalex

3301 silver badge8 bronze badges

1 Comment

MadMatt Over a year ago

Yes, this is also another alternative to Hardik Modha answer. Thank you too. :)

Yossi · Accepted Answer · 2018-04-07 19:54:24Z

0

Define a css file where you will set a style for li, and include in the the .js file.

for example: in file.css:

li {
  font-size: 20
}

in file.js:

import './file.css'

edited Apr 7, 2018 at 19:54

answered Apr 7, 2018 at 19:46

Yossi

6,0877 gold badges50 silver badges83 bronze badges

3 Comments

MadMatt Over a year ago

Thanks, but that's not what I'm looking for. I want to achieve this particular styling purely with javascript, if possible.

Yossi Over a year ago

I answered your question which is: "I want to apply some style to "li" elements, but how to do so without writing style={styles} for every single "li" element?" :)

MadMatt Over a year ago

Ah.. so the rest of the question is just not important. Okay. I'll update my question with bold for other to understand it clearly.

Collectives™ on Stack Overflow

Inline CSS in React - how to style multiple li elements

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related