Слияние кода завершено, страница обновится автоматически
Emotion is Grafana's default-to-be approach to styling React components. It provides a way for styles to be a consequence of properties and state of a component.
For styling components, use Emotion's css function.
To access the Emotion theme in your styles, use the useStyles hook. This hook provides basic memoization and access to the theme object.
Note: Please remember to put
getStylesfunction at the end of the file!
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { css } from '@emotion/css';
const Foo = (props: FooProps) => {
const styles = useStyles2(getStyles);
// Use styles with classNames
return <div className={styles}>...</div>;
};
const getStyles = (theme: GrafanaTheme2) =>
css({
padding: theme.spacing(1, 2), // will result in 8px 16px padding
});
In more complex cases, you can have the getStyles function return an object with many class names and use Emotion's cx function to compose them.
This feature can be especially useful in certain use cases:
Let's say you need to style a component that has a different background depending on the isActive property. For example:
import { css, cx } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
interface ComponentAProps {
isActive: boolean;
}
const ComponentA = ({ isActive }: ComponentAProps) => {
const styles = useStyles2(getStyles);
return (
<div className={cx(styles.wrapper, isActive && styles.active)}>
As red as you can get
<i className={styles.icon} />
</div>
);
};
// Mind, that you can pass multiple arguments, theme included
const getStyles = (theme: GrafanaTheme2) => {
return {
wrapper: css({
background: theme.colors.background.secondary,
}),
active: css({
background: theme.colors.primary.main,
text: theme.colors.primary.contrastText,
}),
icon: css({
fontSize: theme.typography.bodySmall.fontSize,
}),
};
};
For more information about themes at Grafana, refer to the themes guide.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )