在Web開發中，CSS通常是用來控制網頁的樣式和布局。CSS聲明的樣式可以應用到HTML元素上，并使其變得更加美觀和易讀。

與此同時，提供最近開發方法擁抱移動端設備等發展需求，前端開發人員現在更多的將樣式控制代碼寫在JavaScript文件中的JavaScript對象中，為其賦予更高的可讀性和靈活性。這個技術被稱為CSS-in-JS。

在實際開發中，可以通過各種不同的工具和庫來實現CSS-in-JS。其中一個很流行的庫是Styled Components，它提供了一種基于標記模板語法的CSS解決方案，使開發人員能夠編寫自己的CSS樣式，并以一種可維護的方式將其應用到應用程序的各個組件中。

import styled from 'styled-components';
const Button = styled.button`
background-color: ${props =>props.primary ? "blue" : "white"};
color: ${props =>props.primary ? "white" : "blue"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid blue;
border-radius: 3px;
`;
render(
Normal ButtonPrimary Button
);

使用Styled Components，我們可以將按鈕的樣式定義為一個名為Button的組件。組件的定義是一個標記模板字符串，它提供了定義CSS樣式的所有功能，同時它還可以接收類似于React.props的道具，并使用它們來實現更有針對性的樣式。

最后，在組件的渲染部分，我們可以像使用普通的React組件一樣使用我們定義的Button組件，并根據需要從props中設置道具。因此，Styled Components可以讓我們以一種更具表現力和可維護性的方式來組織我們的CSS樣式。