styled-components

import styled from "styled-components";
const  コンポーネント名 = styled.htmlタグ名`
------CSSをここに記述------
この中にプロパティを渡す場合は、${}として渡す。
`;

const StyledButton = styled.button`
    margin: auto;
    border-radius: 9999px;
    border: none;
    display: block;
    width: 120px;
    height: 60px;
    font-weight: bold;
    cursor: pointer;
    background: ${(props) =>  props.isSelected ? 'pink' : ''};
`;

<StyledButton>ボタン</StyledButton>

const 継承先コンポーネント名 = styled(継承元コンポーネント名)`
------CSSをここに記述------
この中にプロパティを渡す場合は、${}として渡す。
`;

const OrangeButton = styled(StyledButton)`
  background-color: orange;

  &:hover {
    color: red;
  }
`;
`;

import { 使用するコンポーネント名} from "@chakra-ui/react";
import { VStack, StackDivider } from "@chakra-ui/react";
const List = ({todos, deleteTodo}) => {
    const complete = (id) => {
        deleteTodo(id)
    }
    return (
        <VStack
            divider ={<StackDivider/>}
            color = {{sm:'red.600',md:'blue.600',lg:'green.500',xl:'red.600'}}
            borderColor = "black.100"
            borderWidth = "1px"
            borderRadius = "3px"
            padding = {5}
            alignItems="start"
        >
            {todos.map(todo => {
                return (
                    <div key={todo.id}>
                        <button onClick={() => complete(todo.id)}>完了</button>
                        <span>{todo.content}</span>
                    </div>
                )
            })}
        </VStack>
    );
}

export default List;