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

Question

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

文档指出，这可以通过设置activeClassName属性来实现。

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

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

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

突出显示的 css class 如下：

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

但是，没有渲染底部边框。 如何获得activeClassName样式以呈现在 Typescript 环境中的material-ui按钮内呈现的react-router-dom NavLink ？

我的构建环境配置如下。

我为样式表创建了一个类型声明文件，并将其保存在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拾取并作为字符串嵌入到捆绑文件中。

Answer 1

您所拥有的应该可以工作，但是您传递的是 class 名称，而不是样式，因此我认为您只需要使您的activeClassName道具等于“突出显示”。

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

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

工作代码和框链接