如何在 typescript 环境中的 material-ui 按钮内渲染 react-router-dom NavLink 的 activeClassName 样式？

Posted 2023-02-22

【中文标题】如何在 typescript 环境中的 material-ui 按钮内渲染 react-router-dom NavLink 的 activeClassName 样式？

【英文标题】：How to render activeClassName style for a react-router-dom NavLink rendered within a material-ui button in a typescript environment?

【发布时间】：2020-02-07 00:25:21

【问题描述】：

我正在学习 react 并尝试设置 react-router-dom NavLink 封装在 ma​​terial-ui 中的样式 按钮。我正在使用带有 Typescript 和自定义 Webpack 构建的 React。

documentation 声明这可以通过设置 activeClassName 属性来实现。

在下面的代码清单中，我尝试在包含 NavLink 组件的按钮上设置 activeClassName。

import * as navbar from './NavBar.css';

const NavBarLinks = () => (
  <>
    <Button
      color="inherit"
      component=NavLink
      activeClassName=navbar.highlighted
      to="/about"
    >
      About
    </Button>
  </>
);

高亮的css类如下：

.highlighted 
  border-bottom: 3px solid rgb(174, 185, 28);

但是，没有渲染底部边框。如何获得 activeClassName 样式以呈现 react-router-dom NavLink 在 ma​​terial-ui中呈现> Button 在 Typescript 环境中？

我的构建环境配置如下。

我已经为样式表创建了一个类型声明文件 并将其保存在 tsconfig.json 中引用的文件夹中。

export const active: string;
export const horizmenu: string;
export const highlighted: string;

我的 tsconfig.json 包含 typesRoot 配置。这引用了存储我的 css 类型声明文件的类型文件夹：

"typeRoots": ["node_modules/@types", "src/types"]

我的 webpack 开发配置是使用 css-loader 来打包 src/app/*/

下的 css 文件

 
        // link css modules
        test: /\.css$/,
        include: path.resolve(constants.dir.SRC, 'app'),
        use: [
           loader: require.resolve('style-loader') ,
          
            loader: require.resolve('css-loader'),
            options: 
              modules: 
                localIdentName: '[path][name]__[local]___[hash:base64:5]',
              ,
              importLoaders: 1,
              sourceMap: true,
            ,
          ,
        ],
      ,
    ...

当我执行 Webpack 开发构建时，我可以看到 NavBar.css 内容被 css-loader 拾取并作为字符串嵌入到捆绑文件中.

【参考方案1】：

你所拥有的应该可以工作，但是你传递的是一个类名，而不是一个样式，所以我认为你只需要让你的 activeClassName 属性等于“highlighted”。

<Button
  color="inherit"
  component=NavLink
  activeClassName="highlighted"
  to="/about"
 >
  About
</Button>

您还需要将 !important 添加到您的样式中，以便它覆盖 Material UI 按钮的 CSS。

工作代码框link

【讨论】：

非常感谢@bgaynor78。刚刚检查了代码框链接。这非常有用，给了我一些希望 :) 好的，看来我快到了，并且走上了正确的轨道……但是，我使用的是带有 typescript 的自定义 webpack 构建，因此 的语法不同activeClassName 属性。我尝试添加 important! 和 activeClassName="highlighted" 但仍然没有按预期呈现。问题必须在我的构建环境中的某个地方。抱歉，将使用构建环境更新问题......

知道了，重要的错字了！而不是！重要。这成功了@bgaynor78。非常感谢....接受答案:)