Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Style a single button in antdesign

I am new to ant design 5 and I’ve gone through the docs and I can’t seem to find a way to style a single button component without affecting other buttons.

What I want is to change the hover background color of only the following link button:

<Button type={"link"} href={link} >{cta}</Button>

without affecting other link buttons. How can that be achieved?

Tags:

2

Answers


  1. 0

    You can use a nested ConfigProvider:

    <ConfigProvider
  theme={{
    token: {
      colorPrimary: '#f00',
    },
  }}
>
  <Space>
    <Button type="primary">Default theme</Button>
    <ConfigProvider
      theme={{
        token: {
          colorPrimary: '#0f0',
        },
      }}
    >
      <Button type="primary">Nested theme</Button>
    </ConfigProvider>
  </Space>
</ConfigProvider>

    Or use Button style prop passing inline styles:

    <Button
  type="primary"
  style={{
     backgroundColor: '#f00',
  }}
>
  Custom button
</Button>

    Or use className prop and style it using a css file:

    <Button
  type="primary"
  className="custom-button"
>
  Custom button
</Button>

// css file
.custom-button {
  background-color: #f00;
}
    Login or Signup to reply.
  2. 0

    This can simply be achieved by using inline CSS or creating a custom CSS class for the specific button.

    import { Button } from 'antd';

//...rest of code

  const customStyle = {
    transition: 'all 0.3s',
  };

  const customHoverStyle = {
    backgroundColor: 'lightblue',
  };
// Or you can also take it to external css file

  return (
    <Button
      type="link"
      href={link}
      style={customStyle}
      /*...other props*/
     >
      {cta}
    </Button>
  );
}

    SAMPLE DEMO

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search