问题标签 [aphrodite]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
307 浏览

javascript - Aphrodite CSS 覆盖边距和填充

我遇到了阿芙罗狄蒂的问题,例如,如果我将基本组件设置为全局选择器margin: 0或任何边marginLeft, marginRight, marginTop,marginBottom设置。然后,当我尝试覆盖其中一个时,它不需要。

例如,然后我添加另一种样式的div集合不起作用。反过来也是一样。如果设置并且我设置它不起作用。margin: 0marginBottom: 10marginBottom: 10margin: 0

https://github.com/Khan/阿芙罗狄蒂

0 投票
1 回答
1175 浏览

javascript - 如何用阿芙罗狄蒂覆盖material-ui className?

我正在使用 React 并对一些图标进行样式设置。我正在为我的组件使用Material-UI库。我使用的组件之一是FontIcon。它已经有一个类名,我无法用我传入的阿芙罗狄蒂风格覆盖。

如果我在这个控件上设置样式,它工作正常:

您如何覆盖现有的类名?我试过了:

谢谢!

0 投票
2 回答
862 浏览

javascript - React Aphrodite 奇数 + 偶数选择器

目前我正在使用 React 开发一个简单的应用程序,我选择使用 Aphrodite 来处理我的 CSS。

但是我遇到了一个我找不到答案的问题,它正在处理奇数甚至伪选择器。有没有人有一个关于如何使用阿芙罗狄蒂来处理奇数 + 偶数假的例子。

0 投票
3 回答
3426 浏览

css - 阿芙罗狄蒂中的类>元素选择器

如何在 aphrodite 中实现 >elemnt 选择器。我想将我的孩子 div 设置为宽度“100%”

但它不工作。

0 投票
1 回答
159 浏览

css - 在 vue 插件上使用 Aphrodite 注入样式

很难弄清楚如何在任何 vue 插件上使用Aphrodite应用 css。我试图在vue-select插件上覆盖 css,但问题是我无法访问插件内生成的元素。我试图获得一个类选择器,但没有运气。任何帮助将非常感激。

样本:

脚本:

0 投票
1 回答
452 浏览

twitter-bootstrap - CSS-In-Js 在一个 html 元素上使用带有字符串类名的 aphrodite 样式对象

我现有的项目使用 Bootstrap,看起来像:

但阿芙罗狄蒂要求类似的东西:

问题:

如何合并这两种方法?

0 投票
1 回答
1206 浏览

reactjs - 如何使用带有 react-dates 的自定义主题?

我正在尝试使用react-with-stylesAphrodite在 Typescript 中设置我的样式。我正在使用此代码,模拟来自https://github.com/airbnb/react-dates#interfaces的代码:react-dates DayPickerRangeController

但是,当我运行它时,我在控制台中收到此运行时错误:

在以下情况下我没有收到此错误:

  1. 我使用registerInterfaceWithDefaultTheme类中的函数(但这不允许我设置组件的样式)。(这让我感到惊讶,因为其中的代码registerInterfaceWithDefaultTheme看起来与我所拥有的相同(至少对我而言))

    /li>
  2. 我使用import 'react-dates/initialize';(最终调用registerInterfaceWithDefaultTheme)。

在以下情况下我仍然会收到此错误:

  1. 我交换了注册主题和界面的顺序
  2. ThemedStyleSheet我在文件顶部添加代码src/index,而不是在与使用的文件相同的文件中DayPickerRangeController(这是https://stackoverflow.com/a/48558841/1176156中的建议修复)
  3. 我将来自https://github.com/airbnb/react-dates#interfaces的确切代码放入 Javascript 中,然后将其导入我正在使用的 Typescript 文件中DayPickerRangeController

我已经在调试器中确认我所有的导入都得到了有效的代码,而不是例如undefined.

0 投票
1 回答
571 浏览

reactjs - 风格反应选择与阿芙罗狄蒂

我正在尝试使用 aphrodite 中内置的一些现有样式来设置第 3 方组件 react-select 的样式。该组件上有一些道具,允许您传递一个定义类的类名,以用于组件的主容器。然后它有一个 classNamePrefix 属性,用于为组件中的子项添加前缀。文档详细说明了在样式表中使用什么 classNamePrefix + name 组合来设置每个项目的样式。

https://react-select.com/styles#using-classnames

我正在寻找一个如何使用阿芙罗狄蒂来做到这一点的例子。我遇到的问题是当我调用 css() 时,我得到一个随机的类名。我想不出一种方法来指定 classNamePrefix。

0 投票
1 回答
414 浏览

javascript - 将导入的样式对象传递给自定义挂钩无法按预期工作

我正在尝试创建一个自定义钩子,它将为我们处理一些 Aphrodite ( https://github.com/Khan/aphrodite ) 样式的合并,但是在传入样式对象时我遇到了一些不寻常的行为。

这是我的钩子:(计划是用 useMemo 组成,这就是为什么它是一个钩子)

以及基本用法:

想法是,如果styles传入一个 prop,它将与 baseStyles 中的任何内容合并,并给出最终的 Aphrodite Stylesheet 用于该组件实例。

我在这里创建了一个简单的 repro 存储库:https ://github.com/bslinger/hooks-question

预期:在两条路线之间单击会改变文本的颜色,具体取决于是否已传入道具以覆盖该样式。

实际:一旦样式被合并,即使没有传入额外道具的路线也会以覆盖的颜色显示它。

注意:我意识到在删除 useMemo 之后,这在技术上甚至不是一个钩子,并且将 React 降级到 16.7 会导致相同的行为,所以我猜这毕竟只是一个 Javascript 或 React 问题?

0 投票
1 回答
946 浏览

reactjs - 如何在 JS 和 React Router 中使用 CSS 设置活动链接子项的样式?

我在 JS 中使用 React ROuter 和 CSS 作为样式。我想更改活动链接子 div(navIndicator 和 innerIndicator)的背景颜色和边框颜色

但是,当 nav 链接处于活动状态时,navIndicator 和 innerIndicator 颜色不会改变。想知道如何使样式适用于活动链接?