styled-component

styled-component

import styled, { css } from 'styled-components';
import React from 'react';

interface Border extends React.HTMLAttributes<HTMLElement> {
  isInEdit: boolean;
}

const border = css<Border>`
  border: 1px solid ${({ isInEdit }) => (isInEdit ? 'red' : 'transparent')};
  &:hover {
    border: 1px solid red;
  }
`;

export const HighlightDiv = styled.div<Border>`
  ${border};
`;

export const HighlightSection = styled.section<Border>`
  ${border}
`;