カーソルもどきを違和感なく作るTips

まずは見た目の確認

うえから
|を入力していない文字列
|を含め、間のスペースを調整した文字列
|を含め、スタイリングしていない文字列

実装で何をしたか

• Typographyを使ってTextfieldみたいな見た目を作る
• 枠線、|のアニメーション、|の部分だけletter-spacingやmargin-leftをマイナスに変えて間のスペースをなくす
  ※Textfield中で|だけletter-spacingやmargin-leftを聞かせようとすると表示がおかしくなるので、BoxとTypographyを使ってTextfieldもどきを作成し、入力欄のように見せる

実装

'use client';
import React from 'react';
import Typography from '@mui/material/Typography';
import { styled, keyframes } from '@mui/system';
import { Box, TextField } from '@mui/material';
import { createTheme, ThemeProvider } from '@mui/material/styles';

const theme = createTheme({
typography: {
  fontSize: 16,
},
});

// 点滅アニメーションを作成
const blink = keyframes`
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
`;

// スタイリングされたTypographyコンポーネントを作成
const StyledTypography = styled(Typography)(({ theme }) => ({
letterSpacing: '-2px!important',
marginLeft: '-2px !important',
fontWeight: 'lighter',
animation: `${blink} 1s infinite`, // 点滅アニメーションを適用
}));

const StyledBox = styled(Box)(({ theme }) => ({
border: '1px solid blue !important',
width: '100px',
}));

export default function MyComponent() {
return (
  <ThemeProvider theme={theme}>
    <Typography>1. なにも|の入ってない文字列</Typography>
    <Box sx={{ border: '1px solid blue', width: 100, mt: 1 }}>
      <Typography component="span">aaaaaa</Typography>
    </Box>
    <Typography>
      2. |を含め、letter-spacingなどでスタイリングした文字列
    </Typography>
    <StyledBox>
      <Typography component="span">aaa</Typography>
      <StyledTypography component="span">|</StyledTypography>
      <Typography component="span">aaa</Typography>
    </StyledBox>
    <Typography>3. |を含めたスタイリングなしの文字列</Typography>
    <Box sx={{ border: '1px solid blue', width: 100, mt: 1 }}>
      <Typography component="span">aaa</Typography>
      <Typography component="span">|</Typography>
      <Typography component="span">aaa</Typography>
    </Box>
    {/* <TextField></TextField> */}
  </ThemeProvider>
);
}

適用させるためにこのあとやること

• 入力用のTextfield(display: noneで最後消す部分)にフォーカスあてたときと外したときの、今回作成した出力用の入力欄もどきの枠線のスタイルの切り替えを追加
  (前にすでに作成したスタイルに、フォーカスあててないときに影を付ければおそらく完成する)
• |の置く場所を、カーソル位置の変更に合わせて変えられる実装を反映させる(作成済み)