在情感css中悬停时访问其他className

unguejic 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(125)

我使用EmotionCSS。我想访问另一个className，同时捕获另一个className的焦点。例如，我有一个组件，如下所示：

<div className={styles.root}>
  <input className={styles.input} ... />
<div/>

样式文件如下所示：

import { css } from '@emotion/css';

export const styles = {
  root: css`
    border: 1px solid black;
  `

  input: css`
    ... 

    &:focus {
      // Here I want to access 'root' className and change its colour. Is it possible?
    }

  `,
}

css

来源：https://stackoverflow.com/questions/74717247/access-other-classname-on-hover-in-emotion-css

1条答案

按热度按时间

afdcj2ne1#

您可以在root上使用:has()伪类来更改input类中的焦点样式。

import { css } from "@emotion/css";

export const styles = {
  root: css`
    border: 3px solid black;
    &:has(input:focus) {
      border-color: red;
    }
  `,
  input: css`
    font-size: 1.5rem;
    &:focus {
      text-transform: uppercase;
    }
  `
};

export default function App() {
  return (
    <div className="App">
      <div className={styles.root}>
        <input type="text" className={styles.input} />
      </div>
    </div>
  );
}

赞(0）回复(0）举报 2022-12-15

我来回答

在情感css中悬停时访问其他className

1条答案

相关问题

热门标签

最新问答