diff --git a/packages/web/components/templates/article/ArticleContainer.tsx b/packages/web/components/templates/article/ArticleContainer.tsx index f9d223816..d258836c3 100644 --- a/packages/web/components/templates/article/ArticleContainer.tsx +++ b/packages/web/components/templates/article/ArticleContainer.tsx @@ -118,16 +118,21 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { props.highlightOnRelease ) // iOS app embed can overide the original margin and line height - const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = - useState(null) - const [lineHeightOverride, setLineHeightOverride] = - useState(null) - const [fontFamilyOverride, setFontFamilyOverride] = - useState(null) - const [highContrastTextOverride, setHighContrastTextOverride] = - useState(undefined) - const [justifyTextOverride, setJustifyTextOverride] = - useState(undefined) + const [maxWidthPercentageOverride, setMaxWidthPercentageOverride] = useState< + number | null + >(null) + const [lineHeightOverride, setLineHeightOverride] = useState( + null + ) + const [fontFamilyOverride, setFontFamilyOverride] = useState( + null + ) + const [highContrastTextOverride, setHighContrastTextOverride] = useState< + boolean | undefined + >(undefined) + const [justifyTextOverride, setJustifyTextOverride] = useState< + boolean | undefined + >(undefined) const highlightHref = useRef( window.location.hash ? window.location.hash.split('#')[1] : null ) @@ -142,8 +147,9 @@ export function ArticleContainer(props: ArticleContainerProps): JSX.Element { ) useEffect(() => { + setLabels(props.labels) updateFontSize(props.fontSize ?? 20) - }, [props.fontSize]) + }, [props.labels, props.fontSize]) // Listen for preference change events sent from host apps (ios, macos...) useEffect(() => {