Linaria CSS 是一個小巧的 CSS-in-JS 庫。它與 React 搭配使用，幫助你編寫樣式化的組件。

通過將 CSS 編寫為 JavaScript 模塊的形式，Linaria 可以更好地控制樣式的復雜度，并提高代碼的可讀性。在瀏覽器中，Linaria 會將所有的 CSS 代碼轉換為 CSS-in-JS，然后在頁面中將其呈現出來。

使用 Linaria，你可以將樣式和組件耦合在一起，避免了 CSS 樣式污染和無樣式組件的問題。此外，Linaria 通過在運行時動態生成樣式，也提高了 React 組件的性能表現。

import { styled } from '@linaria/react';
const Button = styled.button`
background: #0070f3;
color: #fff;
font-size: 1rem;
padding: 0.5rem 1rem;
border: none;
border-radius: 0.25rem;
&:hover {
background: #0061d1;
}
`;
// 使用 Button 組件
function App() {
return (確認);
}

以上代碼是一個簡單的 Button 組件。我們使用styled對其進行了樣式化，設置了背景色、字體顏色、邊框等樣式。使用時只需要像普通組件一樣使用即可。

通過 Linaria CSS，我們可以輕松地實現組件樣式的可讀性和可維護性，讓我們在編寫 React 組件時更加方便快捷。