styled-components の基本的な書き方

styled-componentsをインストール

$ npm add styled-components

書き方

ListStyleComponent.jsx

import styled from 'styled-components';

export const Li = styled.li`
  border-left: 4px solid lightgray;
  margin-top: 12px;
  padding-left: 12px;
    &:hover {
      border-left: 4px solid orange;
    }
  line-height: 1.8;
`;

export const DateStyle = styled.span`
  font-size: small;
  color: gray;
`;

export const ListTitle = styled.div`
  line-height: 1.5;
`;

NoteArticlesComponent.jsx

import React from 'react';
import {Li, DateStyle, ListTitle} from './ListStyleComponent';

const articleLists = [
  {
    id: 1,
    date: "YYYY/MM/DD",
    title: "aaa",
    url: "https://xxx..."
  },
  {
    id: 2,
    date: "YYYY/MM/DD",
    title: "bbb",
    url: "https://xxx..."
  },
  {
    id: 3,
    date: "YYYY/MM/DD",
    title: "ccc",
    url: "https://xxx..."
  },
];

const NoteArticlesComponent = () => (
  <>
    {articleLists.map((list) => (
      <ul>
        <Li key={list.id}>
          <a href={list.url}>
            <DateStyle>{list.date}</DateStyle>
            <br />
            <ListTitle>{list.title}</ListTitle>
          </a>
        </Li>
      </ul>
    ))}
  </>
);

export default NoteArticlesComponent

参考サイト

• styled-component Getting Started