反映虚拟组件样式

Question

在编写虚拟reactjs组件时，我们如何决定这些css问题（应该由虚拟组件本身控制还是始终由容器控制？）

• 假组件的大小，如果它是固定的（例如宽度：20px）或灵活的（例如宽度：100％，或者甚至只是取决于孩子的数量）
• 虚拟组件的位置，例如，如果它是一个＆＃34;标头组件＆＃34;通常固定在屏幕顶部，我应该在虚拟标题内写css，以便它总是自动出现在顶部，还是让容器决定？

而且，如果一个容器决定其假孩子的风格，推荐的方式是什么？ （它是<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="skillbar first" data-percent="50%"> <div class="skillbar-title" style="background: #3498db;"><em>HTML</em> </div> <div class="skillbar-bar" style="background: #3498db;"></div> <div class="skillbar-percent">50%</div> </div> <div class="skillbar" data-percent="60%"> <div class="skillbar-title" style="background: #2ecc71;"><em>CSS</em> </div> <div class="skillbar-bar" style="background: #2ecc71;"></div> <div class="skillbar-percent">60%</div> </div> <div class="skillbar" data-percent="80%"> <div class="skillbar-title" style="background: #9b59b6;"><em>PHP</em> </div> <div class="skillbar-bar" style="background: #9b59b6;"></div> <div class="skillbar-percent">80%</div> </div> <div class="skillbar" data-percent="90%"> <div class="skillbar-title" style="background: #e74c3c;"><em>JQUERY</em> </div> <div class="skillbar-bar" style="background: #e74c3c;"></div> <div class="skillbar-percent">90%</div> </div>？）还是其他方式？

提前多多感谢！