Reactjs 我可以用散列或随机字符串生成每个类名吗？

我是一个新的风格的组件

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;
  }
`

函数应用程序（）{
返回(
你好，代码沙盒
开始编辑，看看有什么神奇的事情发生
);
}
const TitleSection=styled.div`
.头衔{
字体大小：16px；
颜色：红色；
}
`
常量DescriptionSection=styled.div`
.头衔{
字体大小：14px；
}
`

我使用它有问题。我想显示

DescriptionSection

标题颜色的默认值（黑色）

这两个样式化组件都使用哈希类名具有

.title

样式

是否可以使哈希类名

.title

我知道一些解决这个问题的方法，使用

&>title

并制作

title

样式化组件

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;
  }
`

但我想知道不使用上述方法解决此问题的其他方法。

检查下面的代码，“Button是默认的”，TomatoButton是样式更改（覆盖）的子项

//最后一节中没有插值的按钮
const Button=styled.Button`
颜色：淡紫罗兰色；
字号：1em；
边缘：1米；
填充物：0.25em 1米；
边框：2倍纯色淡紫色；
边界半径：3px；`；
//基于按钮但具有某些替代样式的新组件
const TomatoButton=样式化（按钮）`
颜色：番茄；
边框颜色：番茄；`；
渲染(
普通按钮
番茄纽扣
);

使用.title{color:#000）\}@arvindpundir导入显示相同结果的外部样式表检查此项