styled-components

styled-components - 1

styled-components - 2

styled-conents例1

function Sample() {
  return (
    <Container>
      <Button>Submit</Button>
    </Container>
  );
}

const Container = styled.div`
  width: 400px;
  height: 400px;

  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.3);
`;

const Button = styled.button`
  background: orangered;
  color: white;
  padding: 12px 40px;
  border: none;
`;

styled-conents例2

function Sample() {
  const [clicked, setClicked] = useState(false);

  return (
    <Container>
      <Button onClick={() => setClicked((bool) => !bool)} clicked={clicked}>
        Submit
      </Button>
    </Container>
  );
}

const Button = styled.button`
  background: ${({ clicked }) => (clicked ? "orangered" : "lavender")};
  color: ${({ clicked }) => (clicked ? "lavender" : "orangered")};
  padding: 12px 40px;
  border: none;
`;

styled-conents例3

function Sample2() {
  return (
    <List>
      <ListItem>List one</ListItem>
      <ListItem>List two</ListItem>
      <ListItem>List three</ListItem>
    </List>
  );
}

const List = styled.ul`
  display: flex;
  flex-direction: column;
`;

const ListItem = styled.li`
  padding: 20px 100px;
  background: orangered;
  color: white;

  & + & {
    margin-top: 8px;
  }
`;