CODEWITHSUNDEEP
cssreactjstypescriptreact-routerreact-router-dom
anon_dcs3spp
anon_dcs3spp

Reputation: 3022

How to render activeClassName style for a react-router-dom NavLink rendered within a material-ui button in a typescript environment?

I am learning react and trying to set the style of a react-router-dom NavLink encapsulated inside a material-ui Button. I am using React with Typescript and a custom Webpack build.

The documentation states that this can be achieved by setting the activeClassName property.

In the code listing below I try setting the activeClassName on the button containing the NavLink component. 


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

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

The highlighted css class is as follows:

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

However, no bottom border is rendered. How do I get the activeClassName style to render for a react-router-dom NavLink rendered within a material-ui Button within a Typescript environment?

My build environment is configured as follows.

I have created a type declaration file for the stylesheet and saved this in a folder referenced in tsconfig.json. 

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

My tsconfig.json includes the typesRoot configuration. This references the types folder where my css type declaration file is stored:

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

My webpack development configuration is using css-loader to bundle css files under src/app/*/

 {
        // 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,
            },
          },
        ],
      },
    ...

When I perform a Webpack development build I can see that the NavBar.css contents are picked up by the css-loader and embedded as a string in the bundle file.

Upvotes: 1

Views: 4646

Answers (1)

bgaynor78
bgaynor78

Reputation: 454

What you have should work, but you are passing a class name, not a style, so I think you just need to make your activeClassName prop equal to "highlighted".

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

You'll also need to add !important to you style so it overrides the CSS of the Material UI button.

Working codesandbox link

Upvotes: 1

Related Questions