React упоминает с помощью материального пользовательского интерфейса. ⇐ Javascript

[Anonymous]

Я пытаюсь использовать Matuerial UI с библиотекой React упоминания, и в настоящее время у меня есть проблема, в которой мои упоминания и хэштеги не соответствуют тексту. Я попытался добавить пользовательский цвет, чтобы отличить текст от упоминания. что наш стиль в основном такой же, кроме цвета. Я также использовал инструменты Dev, чтобы включить/отключить стили, чтобы определить пробную область
Я с тех пор пробовал удалить родительскую коробку в пользу элемента Div. Br /> Я также лишил весь стиль и ушел с их базовым решением, эта проблема все еще сохраняется. Я открыл проблему на GitHub, но, похоже, проблемы в основном остаются незамеченными их командой. Интересно, столкнулся ли кто -нибудь с этой проблемой, и как вы его решили. Любая информация значительно апреляется. < /P>
Моя текущая реализация < /p>
import { FunctionComponent } from 'react';
import { MentionsInput, Mention } from 'react-mentions';
import { Avatar, Box, Typography, makeStyles } from '@material-ui/core';
import styled, { useTheme } from 'styled-components';
import { useScreenSizes } from 'hooks/use-screen-sizes/useScreenSizes';
import { RICH_TEXT_TRIGGERS } from 'common/constants/richTextTriggers';
import classNames from './styles.module.css';
import { useMentions } from '../../posts/hooks/useMentions';

const useStyles = makeStyles((theme) => ({
root: {
width: '100%',
'& .MuiInput-input': {
fontSize: 'unset',
},
},
}));

export const StyledEllipsisBox = styled(Box)`
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
color: ${(props) => props.theme.colors.accent};
`;

const renderMentionSuggestion = (
suggestion,
search,
highlightedDisplay,
index,
focused,
theme,
isDevice
) => {
const headlineLength = isDevice ? 25 : 55;
return (



{suggestion.display}

{suggestion?.headline?.slice(0, headlineLength)}
{suggestion?.headline?.length > headlineLength && '...'}



);
};

const renderTagSuggestion = (
suggestion,
search,
highlightedDisplay,
index,
focused,
theme,
isDevice
) => (


#{suggestion.display}


{suggestion?.contentCount && `${suggestion?.contentCount} Posts`}




);

interface MentionsInputFieldProps {
value: string;
onChange: (event: React.ChangeEvent) => void;
customStyle?: React.CSSProperties;
placeholderText?: string;
highlighterHeight?: string;
}

export const MentionsInputField: FunctionComponent = ({
value,
onChange,
customStyle,
placeholderText,
highlighterHeight,
}) => {
const { isDevice } = useScreenSizes();
const theme = useTheme();
const { getHashtags, getMentions } = useMentions();
const classes = useStyles();

return (



renderMentionSuggestion(
suggestion,
search,
highlightedDisplay,
index,
focused,
theme,
isDevice
)
}
/>
`#${s}`}
allowSuggestionsAboveCursor
appendSpaceOnAdd
renderSuggestion={(suggestion, search, highlightedDisplay, index, focused) =>
renderTagSuggestion(
suggestion,
search,
highlightedDisplay,
index,
focused,
theme,
isDevice
)
}
/>


);
};


Подробнее здесь: https://stackoverflow.com/questions/793 ... ting-issue