Changing style of calcite-link

Clinton_Lunn

Hello,

I am trying to change the color of a calcite link in my react app in order to match my organization's color scheme, but there doesn't seem to be any CSS/style peop exposed when looking in the documentation. 

Should I instead just use an a tag?

 

Edit: attaching a minimum example to hopefully get more attention.

https://codesandbox.io/p/sandbox/divine-wood-lmsgvg

 

 

 

import React from "react";
import "@esri/calcite-components/dist/components/calcite-link.js";
import { CalciteLink } from "@esri/calcite-components-react";
import "@esri/calcite-components/dist/calcite/calcite.css";

function App() {
  return (
    <>
      <h1>React Template</h1>
      <CalciteLink
        style={{ color: "red" }} // this has no effect
        href="https://google.com/"
        target="_blank"
      >
        Google
      </CalciteLink>
      <div>
        <a
          style={{ color: "red" }} // this works
          href="https://google.com/"
          target="_blank"
          rel="noreferrer"
        >
          Google
        </a>
      </div>
    </>
  );
}

export default App;

 

 

 

 

 

is there a css rule or some other strategy that I can set in order to change my link color before and after visiting?

 

Thanks

KittyHurley

@Clinton_Lunn You can style the link with a few different CSS variables, such as: --calcite-color-text-link, --calcite-color-brand-underline, and --calcite-color-brand in 2.1.0 (the 1.x variable names are --calcite-ui-text-link and --calcite-ui-brand).

Here's a sample in 2.1.0, where if you specify a class or id, you could differentiate between links.

However, at this time Calcite's Link component does not support the :visited CSS pseudo-class. If the :visited class is of interest, you can file a new enhancement request on GitHub for the team to consider with other priorities, or reach out to Esri Support, who can create the enhancement request.