Я работаю в реагировании. js проект с использованием material-ui и sass. Мне нужно создать Компонент, такой как компонент ChatBit, затем я написал его по мере его публикации.
customComponent. js file.
// @flow
import * as React from 'react';
import { useState } from 'react';
import { Avatar} from "@material-ui/core";
import useStyle from './styles';
type Props = {
children: React.Node;
}
const AbsoluteBox = ({
children
}: Props) => {
const [toggled, setToggled] = useState(false);
const styles = useStyle();
const handleClick = () => {
setToggled(!toggled);
};
const contentStyle = `container__content_${toggled ? 'show': 'hide'}`;
return (
<div className={styles.container__bottomRight}>
<div className={styles.container__header} onClick={handleClick}>
<Avatar
variant="rounded"
src="/assets/images/rebots.svg"
className={styles.container__header__avatar}
/>
</div>
<div
className={styles[contentStyle]}
>
{children}
</div>
</div>
);
};
export default AbsoluteBox;
style. js file.
import { makeStyles } from '@material-ui/core';
export default makeStyles({
container__bottomRight: {
position: 'fixed',
right: 0,
bottom: 0,
marginRight: 12,
width: 300,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
boxShadow: '0px 0px 13px 0px rgba(0,0,0,0.51)'
},
container__header: {
paddingLeft: 10,
paddingTop: 4,
paddingBottom: 6,
backgroundColor: '#D7E0FC',
height: 38,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
cursor: 'pointer'
},
container__header__avatar: {
height: 40
},
container__content_hide: {
transition: 'height 400ms 400ms, opacity 400ms 0ms',
opacity: 0.0,
height: 0,
},
container__content_show: {
height: 400,
opacity: 1.0,
boxSizing: 'border-box',
transition: 'height 400ms 0ms, opacity 400ms 400ms',
},
});
, тогда я называю Компонент так:
<AbsoluteBox>
<h1>Hello World</h1>
</AbsoluteBox>
, поэтому проблема, которую я нашел, это когда я откройте коробку, все правильно, но когда мне нужно закрыть ее, есть пробел, который я не вижу, откуда он исходит.
