Могу ли я сделать каждое имя класса с хэш или случайной строкой?

Question

Я новенький для стилевых компонентов.

function App() {
  return (
    <div className="App">
      <TitleSection>
        <p className='title'>Hello CodeSandbox</p>
        <DescriptionSection>
          <p className='title'>Start editing to see some magic happen!</p>
        </DescriptionSection>
      </TitleSection>
    </div>
  );
}

const TitleSection = styled.div`
  .title {
    font-size: 16px;
    color: red;
  }
`

const DescriptionSection = styled.div`
  .title {
    font-size: 14px;
  }
`

У меня проблема с его использованием. Я хочу показать DescriptionSection заголовок цветной по умолчанию (черный).

Оба стилевых компонента имеют стиль .title с использованием имени класса хеш-функции.

Возможно ли сделать имя хешированного класса .title ?? способ.

Answer 1

Проверьте приведенный ниже код, «Кнопка по умолчанию» и TomatoButton является дочерним с измененным стилем (переопределение).

// The Button from the last section without the interpolations
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;`;
// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
color: tomato;
border-color: tomato;`;
render(
<div>
<Button>Normal Button</Button>
<TomatoButton>Tomato Button</TomatoButton>
</div>);