英文:
Reduce the left padding of a dropdown button
问题
I would like to make a row, where there is a title on the left and several buttons and a dropdown on the right.
现在，我想要减小 Button 2 和下拉菜单（例如 Cat）之间的距离。
我猜我们需要覆盖下拉菜单内的 button 的左内边距。我尝试在 FluentProvider 或 Dropdown 的 style 中添加 marginLeft: "-10px" 和 paddingLeft: "-10px"，但没有起作用。
有人能帮忙吗？
CodeSandbox: https://codesandbox.io/s/charming-ritchie-40tyj1?file=/example.tsx
import {
FluentProvider,
webLightTheme,
makeStyles,
shorthands
} from "@fluentui/react-components";
import {
Dropdown,
Option,
OptionGroup,
DropdownProps
} from "@fluentui/react-components/unstable";
import { CommandBarButton } from "@fluentui/react/lib/Button";
import * as React from "react";
import { initializeIcons } from "@fluentui/react/lib/Icons";
initializeIcons(/* optional base url */);
const useStyles = makeStyles({
dropdown: {
// removes default border around the dropdown
...shorthands.borderWidth(0),
// removes the blue bottom border when the dropdown is open
"::after": {
borderBottomWidth: 0
}
}
});
export const Grouped = (props: Partial<DropdownProps>) => {
const land = ["Cat", "Dog", "Ferret", "Hamster"];
const styles = useStyles();
return (
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div style={{ flexBasis: "auto" }}>
<span style={{ lineHeight: "2.7rem" }}>Title</span>
</div>
<div style={{ display: "flex" }}>
<CommandBarButton
styles={{ root: { height: 44 } }}
iconProps={{ iconName: "Back" }}
ariaLabel="Back"
text="Button 1"
disabled={false}
checked={false}
/>
<CommandBarButton
styles={{ root: { height: 44 } }}
iconProps={{ iconName: "Up" }}
text="Button 2"
disabled={false}
checked={false}
/>
<FluentProvider style={{ display: "flex" }} theme={webLightTheme}>
<Dropdown
className={styles.dropdown}
style={{
minWidth: "auto",
display: "flex"
}}
defaultSelectedOptions={["Cat"]}
{...props}
>
<OptionGroup label="Land">
{land.map((option) => (
<Option key={option} disabled={option === "Ferret"}>
{option}
</Option>
))}
</OptionGroup>
</Dropdown>
</FluentProvider>
</div>
</div>
);
};
<details>
<summary>英文:</summary>
I would like to make a row, where there is a title on the left and several buttons and a dropdown on the right.
Now, I would like to make the distance between `Button 2` and the dropdown (e.g., `Cat`) smaller.
I guess we need to overwrite the left padding of the `button` inside the dropdown. I tried to put `marginLeft: "-10px"` and `paddingLeft: "-10px"` in the `style` of `FluentProvider` or `Dropdown`, but it did not work.
[![enter image description here][1]][1]
Could anyone help?
CodeSandbox: https://codesandbox.io/s/charming-ritchie-40tyj1?file=/example.tsx
import {
FluentProvider,
webLightTheme,
makeStyles,
shorthands
} from "@fluentui/react-components";
import {
Dropdown,
Option,
OptionGroup,
DropdownProps
} from "@fluentui/react-components/unstable";
import { CommandBarButton } from "@fluentui/react/lib/Button";
import * as React from "react";
import { initializeIcons } from "@fluentui/react/lib/Icons";
initializeIcons(/* optional base url */);
const useStyles = makeStyles({
dropdown: {
// removes default border around the dropdown
...shorthands.borderWidth(0),
// removes the blue bottom border when the dropdown is open
"::after": {
borderBottomWidth: 0
}
}
});
export const Grouped = (props: Partial<DropdownProps>) => {
const land = ["Cat", "Dog", "Ferret", "Hamster"];
const styles = useStyles();
return (
<div style={{ display: "flex", justifyContent: "space-between" }}>
<div style={{ flexBasis: "auto" }}>
<span style={{ lineHeight: "2.7rem" }}>Title</span>
</div>
<div style={{ display: "flex" }}>
<CommandBarButton
styles={{ root: { height: 44 } }}
iconProps={{ iconName: "Back" }}
ariaLabel="Back"
text="Button 1"
disabled={false}
checked={false}
/>
<CommandBarButton
styles={{ root: { height: 44 } }}
iconProps={{ iconName: "Up" }}
text="Button 2"
disabled={false}
checked={false}
/>
<FluentProvider style={{ display: "flex" }} theme={webLightTheme}>
<Dropdown
className={styles.dropdown}
style={{
minWidth: "auto",
display: "flex"
}}
defaultSelectedOptions={["Cat"]}
{...props}
>
<OptionGroup label="Land">
{land.map((option) => (
<Option key={option} disabled={option === "Ferret"}>
{option}
</Option>
))}
</OptionGroup>
</Dropdown>
</FluentProvider>
</div>
</div>
);
};
[1]: https://i.stack.imgur.com/sxH2R.png
</details>
# 答案1
**得分**: 1
无法为填充赋予负值。尝试在Button2上使用相同的思路，但使用负`margin-right: -10px`。然后，您可能需要将整个导航栏向右移动10px，因为它现在不会保持对齐。您可以通过在导航栏内容上执行相同操作来修复它。
您还可以尝试使用`padding-left: 0 !important`来覆盖`padding`。
<details>
<summary>英文:</summary>
You cant assign negative values to the padding. Try the same idea but on Button2, but with negative `margin-right: -10px` You then might need to move the whole navbar 10px to the right, since it wont stay aligned as it is now. You can fix it by doing the same on navbar content.
You might also try overriding `padding` with `padding-left: 0 !important`
</details>
# 答案2
**得分**: 1
以下是翻译好的内容：
可能有许多方法，也许尝试在 `makeStyles` 中为 `Dropdown` 按钮指定样式，然后将其传递给按钮。下面示例中的值可以进一步调整以适应使用情况。
修改后的演示：[codesandbox][1]
```jsx
const useStyles = makeStyles({
dropdown: {
// 移除默认的下拉框边框
...shorthands.borderWidth(0),
// 当下拉框打开时，移除蓝色底边框
"::after": {
borderBottomWidth: 0
}
},
// 下拉按钮的样式
button: {
paddingLeft: "0px"
}
});
将样式传递给 Dropdown 的按钮：
<Dropdown
className={styles.dropdown}
style={{
minWidth: "auto",
display: "flex",
}}
defaultSelectedOptions={["Cat"]}
// 将样式传递给按钮
button={{ className: styles.button }}
{...props}
>
...
<details>
<summary>英文:</summary>
There might be many approaches, perhaps try specify styles for `Dropdown` button in `makeStyles` and pass it to the button. The value in below example can be further adjusted to suit the use case.
Forked demo with modification: [codesandbox][1]
const useStyles = makeStyles({
dropdown: {
// removes default border around the dropdown
...shorthands.borderWidth(0),
// removes the blue bottom border when the dropdown is open
"::after": {
borderBottomWidth: 0
}
},
// 👇 styles for the dropdown button
button: {
paddingLeft: "0px"
}
});
Pass the styles to the button of `Dropdown`:
<Dropdown
className={styles.dropdown}
style={{
minWidth: "auto",
display: "flex",
}}
defaultSelectedOptions={["Cat"]}
// 👇 pass styles to the button
button={{ className: styles.button }}
{...props}
>
...
[1]: https://codesandbox.io/s/wandering-rain-t5mgcc?file=/example.tsx:1623-2176
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论