MUI 使 TextField 的一部分变为粗体 Material UI 5

Question

I have a TextField that has a defaultValue as shown in below code snippet:

  <TextField
      autoFocus={props.autoFocus}
      fullWidth
      defaultValue={props.defaultValue}
      value={text}
      onKeyPress={handleKeyPress}
      onFocus={(e) => e.target.select()}
      onChange={handleChange}
  />

Part of the default value is wrapped in parentheses, I would like this to be bold while the rest stays the same. How can I achieve this?

Answer 1

You could provide html to the label attribute at runtime. The MUI TextField defaultValue and value attributes don't allow for inline html, but the label attribute does. This function might suite your needs:

const boldTextParser = (text) => {
  let i = 0;
  let l = 0;
  let renderables = [];
  let boldtext = '';

  for (i = 0; i < text.length; i += 1) {
    if (text[i] === ' ') {
      renderables.push(text[i]);

      if (text[i + 1] === '(') {
      // hold boldtext in a variable
        let isBoldTextFound = false;
        while (!isBoldTextFound) {
          for (l = i + 2; l < text.length; l += 1) {
            if (text[l] !== ')') {
              boldtext = boldtext.concat(text[l]);
            } else if (text[l] === ')') {
              isBoldTextFound = true;
              break;
            }
          }
        }
        // put bold text in rendables and update position in string
        renderables.push(
          <strong>
            {boldtext}
          </strong>,
        );
        // reset variables
        boldtext = '';
        i = l + 1;
      }
    }
    renderables.push(text[i]);
  }
  return renderables;
};

Now you can use it in your component like this:

<TextField label={boldTextParser('use (label) and (not) defaultValue')} ... />