如何设置 React Link 组件的样式？

Question

当我尝试设置链接组件的样式时，它不起作用：

Link {
  padding: 0 30px;
}

但是当我使用内联样式时它确实有效

<Link style={{padding: '0 30px'}} to="/invoices">Invoices</Link>

我使用

import './App.css'

并且像 div 这样的普通元素的样式确实有效。

Answer 1

Link 是一个 React 组件，默认情况下不会在原生 CSS 样式中直接读取/定义。 这么说只意味着一件事，链接只是锚标记，因此您可以使用 a.css 在 css 样式表中设置/修改它们。 要设置页面上所有可用链接的样式（常规样式），只需在工作表顶部添加 {general styles..} 即可。 然后要为每个样式单独设置样式，请确保将其包装在带有 className 的 div 中，并在样式中这样做： .divClassNameYou选择一个{自定义样式...}

Answer 2

提供

className

作为

Link

的道具

.link-styles {
  padding: 0 30px;
}

<Link className={"link-styles"} to="/invoices">
  Invoices
</Link>

Answer 3

您可以通过多种方式做到这一点：

1. 在组件中使用

   id

    <Link id="link_Styles" to="/invoices">
          Invoices
    </Link>

CSS 就像

#link_Styles { 
   padding: 0 30px;
}

2. 使用引导内置类，如

    <Link className="px-4" to="/invoices"> //px-4 means 24px (1.5rem)
          Invoices
    </Link>

3. 使用 tailwindCSS 类

    <Link className="px-7" to="/invoices">  //px-7 means 28px (1.75rem)
          Invoices
    </Link>

但是对于方法2和3，你必须分别嵌入它们的

CDN links

。

4. 使用

   className

   就像@Amila 在第一个答案中所做的那样

Answer 4

浏览器会将 Link 组件作为 Dom 中的元素来操作，所以只需写：

a{
  padding: 0 30px;
}

在你的CSS中