javascript 在antdesign中设置单个按钮的样式

bmp9r5qi 于 5个月前发布在 Java

关注(0)|答案(3)|浏览(65)

我是Ant Design5的新手，我已经看过了文档，我似乎找不到一种方法来设计一个按钮组件而不影响其他按钮。
我想要的是只改变以下链接按钮的悬停背景颜色：

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

字符串
而不影响其他链接按钮。如何才能做到这一点？

JavaScript

来源：https://stackoverflow.com/questions/77703315/style-a-single-button-in-antdesign

3条答案

按热度按时间

suzh9iv81#

您可以使用嵌套的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>

字符串
或者使用Button style prop传递内联样式：

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

型
或者使用className prop并使用css文件对其进行样式设置：

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

// css file
.custom-button {
  background-color: #f00;
}

型

赞(0）回复(0）举报 5个月前

blpfk2vs2#

这可以简单地通过使用内联CSS或为特定按钮创建自定义CSS类来实现。

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>
  );
}

字符串