Input styling to match VitePress?

[ms264556]

How should I be styling the Input controls when I'm using this with VitePress?

Buttons etc. don't currently pick up the standard VitePress styling. I can add global css, but is this the recommended solution?

e.g. in my theme/style/custom.css I added the following (which seems to work OK for now):-

.__ns__  button {
    border: 1px solid transparent var(--vp-button-brand-border);
    color: var(--vp-button-brand-text);
    background-color: var(--vp-button-brand-bg);
    border-radius: 20px;
    transition: color .25s, border-color .25s, background-color .25s;
    font-size: 14px;
    font-weight: 600;
    line-height: 38px;
    padding: 0 20px;
    white-space: nowrap;
}

.__ns__  button:hover {
    border-color: var(--vp-button-brand-hover-border);
    background-color: var(--vp-button-brand-hover-bg);
    color: var(--vp-button-brand-hover-text);
    cursor: pointer;
}

[pearmini]

Hi, @ms264556! For now, I think your solution is the recommended one, but we can discuss some proposals to make it easier.

The first proposal is manipulating the related view (DOM) through a callback:

```js eval
button = Inputs.button("add", {
  enhance: (view) => view.classList.add("VPButton", "medium", "brand"),
});
```

The second proposal is exposing the DOM of a signal by the view attribute:

```js eval
vp(Inputs.button("add"));
```

function vp(signal) {
  signal.view.classList.add("VPButton", "medium", "brand");
}

But there is a challenge for both of them in VitePress: you should set a random data attribute to the view as well, which is not a constant value.

I'm not sure how to solve it. Do you have any better ideas?