Кнопка должна быть сдвинута в нижнюю часть блока с использованием margin

Question

В общем я пытаюсь написать компонент BannerCard используя React + Typescript . Кнопка должна находится снизу по центру.

Вот как оно выглядит

Вот как оно должно смотреться :

В моем случае 'button' передается как 'children' . Пробовал использовать различные стили завернув в блок , но без полезно

Это мой 'component.tsx'

import styled from '@emotion/styled';
import classNames from 'classnames';
import { Card } from 'components';
import React, { FC } from 'react';

import { Props } from './props';

const BannerCardBase: FC<Props> = ({ image, children, className, ...rest }: Props) => {
  return (
    <Card className={classNames(className, 'p-3')} {...rest}>
      {children}
    </Card>
  );
};
export const BannerCard = styled(BannerCardBase)<Props>`
  ${({ image }) => `
    background-image: url(${image});

  `}
  width: 212px;
  height: 280px;
  background-size: cover;
  background-position: center;
  padding: 0;
`;

Answer 1

Возможно например так:

<BannerCard >
    <button style={{ position: "relative", top: "180px" }}>Follow</button>
</BannerCard >

БЛОГ НА HUSL

Кнопка должна быть сдвинута в нижнюю часть блока с использованием margin

Ответы (1 шт):