условная ширина по ширине со стилизованными компонентами

Question

import styled from 'styled-components';

<SubTitle length={this.state.name}>{this.state.name}</SubTitle>

Я собираюсь получить случайную строку в this.state.name, и зависит от длины строки, мне нравится устанавливать размер ширины.

const SubTitle = styled.h1`
  font-size: 1.2rem;
  margin: 20px;
  font-weight: bolder;
  background-color: rgba(250, 250, 250, 0.5);
  width: ${async props => {
    let len;
    if (props.length) {
      len = await props.length.length;
    }
    return `${len}rem`;
  }};

Я пробовал это, но это не не работает.

Answer 1

Можете ли вы попробовать использовать -

import styled, { css } from "styled-components";

${props => (props.length ? css`
  width: //change the logic to whatever you want
` : css`
  width: //whatever default width
`)}