Automatic Typewriter effect in React Typescript - css

Question

I want to apply such a Typewriting effect, I am still struggling with styled components.
I know that I need to define two animations, one for typing to animate the characters and second to blink to animate the caret.
Then I apply the :after pseudo-element inline to add the caret to the container element. With Javascript I can set the text for the inner element and set the --characters variable containing the character count. This variable is used to animate the text.
Wite-space: nowrap and overflow: hidden are needed to make content invisible as necessary.
But its not working in my App. I declared all styles and apply them inline.
App.tsx
import React from 'react';
import { Box } from '#mui/material';
const styles = {
typewriterEffect: {
display: "flex",
justifyContent: "center",
fontFamily: "monospace",
},
"typewriter-effect > text": {
maxWidth: 0,
animation: "typing 3s steps(var(--characters)) infinite",
whiteSpace: "nowrap",
overflow: "hidden",
},
"typewriter-effect:after": {
content: " |",
animation: "blink 1s infinite",
animationTimingFunction: "step-end",
},
"#keyframes typing": {
"75%",
"100%": {
maxWidth: "calc(var(--characters) * 1ch)",
},
},
"#keyframes blink": {
"0%",
"75%",
"100%": {
opacity: 1,
},
"25%": {
opacity: 0,
}
}
};
function Typewriter() {
const typeWriter: HTMLElement | null = document.getElementById('typewriter-text');
const text = 'Lorem ipsum dolor sit amet.';
typeWriter.innerHTML = text;
typeWriter.style.setProperty('--characters', text.length);
return (
<Box style={styles.typewriterEffect}>
<Box class="text" id="typewriter-text"></Box>
</Box>
);
}
export {Typewriter};

Answer 1

Forked into your codesandbox to recreate your issue.
You could have used styled-components i.e
import { styled } from "#mui/material/styles";
given from MUI to create styles same as Codepen Example.
Below is my solution -
https://codesandbox.io/s/automatic-typewriter-effect-stackoverflow-y546o7?file=/src/Typewriter.tsx