使用 @fluentui/react-northstar使用组件风格

发布于 2025-02-12 07:54:17 字数 1213 浏览 0 评论 0原文

我正在尝试在我的项目中给出所有＆lt; segment＆gt; s边框半径。通过阅读似乎最好的方法是自定义主题中的组件风格。

我已经从NorthStar导入TeamStheme，创建了一个自定义主题，添加一个段属性并使用deepmerge软件包合并。我用 this 这是一个跳跃观点。

最终结果是段组件的所有基本样式都丢失了，只有我使用的样式。我错过了什么，以使我的更改与段组件样式合并，而不是覆盖它们。

干杯。

代码示例

import { teamsTheme, Provider } from "@fluentui/react-northstar";
import deepMerge from "deepmerge";


const customTheme = {
    componentStyles: {
        Segment: {
            root: { // Added root here from trial and error. Nothing else seemed to make any changes
                borderRadius: 4
            }
        }
    },
};

const theme = deepMerge(teamsTheme, customTheme);

const App () => {

    return <Provider theme={theme}>
        <Segment>Test</Segment>
    </Provider>
}

原文

I am trying to give all the <Segment>s in my project a border radius. From reading the docs it seems the best way to do this is the componentStyles in a custom theme.

I have imported teamsTheme from northstar, created a custom theme, adding a Segment property and merged using a deepmerge package. I used this post as a jumping off point.

The end result is all base styles of the segment component are lost and only the styles I put in used. What have I missed so that my changes are merged with the segment component styling rather than overriding them.

Cheers.

Code example

import { teamsTheme, Provider } from "@fluentui/react-northstar";
import deepMerge from "deepmerge";


const customTheme = {
    componentStyles: {
        Segment: {
            root: { // Added root here from trial and error. Nothing else seemed to make any changes
                borderRadius: 4
            }
        }
    },
};

const theme = deepMerge(teamsTheme, customTheme);

const App () => {

    return <Provider theme={theme}>
        <Segment>Test</Segment>
    </Provider>
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁吢 2025-02-19 07:54:17

当我尝试

const customTheme = {
    siteVariables: {
        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)"
    },
    componentStyles: {
        Segment: {
            root: ({ variables, theme: { siteVariables } }) => ({
                ...teamsTheme.componentVariables.Segment(siteVariables),
                borderRadius: "4px",
                borderWidth: 0,

            })
        }
    }
};

const theme = deepMerge(teamsTheme, customTheme);

/// Unrelated code  removed 

return <Provider theme={theme}> ... </Provider>

在这里，我可以更新边框半径和所有segment s的框阴影。也许更好的解决方案是使用自定义样式段而不是更新现有的，但该解决方案现在可以使用。

I found this solution when I tried creating a custom component

const customTheme = {
    siteVariables: {
        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)"
    },
    componentStyles: {
        Segment: {
            root: ({ variables, theme: { siteVariables } }) => ({
                ...teamsTheme.componentVariables.Segment(siteVariables),
                borderRadius: "4px",
                borderWidth: 0,

            })
        }
    }
};

const theme = deepMerge(teamsTheme, customTheme);

/// Unrelated code  removed 

return <Provider theme={theme}> ... </Provider>

Here I can update the border radius and the box shadow of all Segments. Maybe the better solution was to use a custom StyledSegment instead of updating the existing but this solution will work for now.

回复收藏 0 原文

~没有更多了~