0

I want to put a space between two dash borders, but I don't know how to put it in a styled component. Is there anyone who can solve my problem? enter image description here

const LogoBox = styled(Box)(({ theme }) => ({
  width: '145px',
  height: '145px',
  display: 'flex', 
  borderRadius: '10px',
  marginBottom: '24px',
  border: '1px dashed',
  alignItems: 'center',
  flexDirection: 'column',
  justifyContent: 'center',
  backgroundColor: theme.palette.info.main,
  borderColor: theme.palette.primary.main,
}));

<LogoBox>
        <Button>
        <Plus size={24} />
        </Button>
        <BoxTitleText>Max 100x100 px</BoxTitleText>
</LogoBox>

enter image description here

Muhammad Nurul Ahsan
  • 29
  • 5
  • I think the answer to this question might help you: https://stackoverflow.com/questions/2771171/control-the-dashed-border-stroke-length-and-distance-between-strokes – giosan Dec 14 '22 at 12:23
  • I have already used display property, I think, that's why is this case not for me. but thanks a lot for helping me. – Muhammad Nurul Ahsan Dec 14 '22 at 12:34
  • Have you tried some of the techniques in that question - they should work for you. Give them a go and if still stuck put your code into your question with a description of what isn't working. See https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Dec 14 '22 at 14:00

1 Answers1

0

backgroundImage: 'linear-gradient(to left, #5F59FF 50%, transparent 50%), linear-gradient(to left, #5F59FF 50%, transparent 50%), linear-gradient(to top, #5F59FF 50%, transparent 50%), linear-gradient(to top, #5F59FF 50%, transparent 50%)', backgroundPosition: 'left top, left bottom, left top, right top', backgroundRepeat: 'repeat-x, repeat-x, repeat-y, repeat-y', backgroundSize: '19.5px 1px, 19.5px 1px, 1px 19.5px, 1px 19.5px',

Muhammad Nurul Ahsan
  • 29
  • 5