如何将semantic-ui-react中Form.Input的placeholder右对齐？

我目前使用Semantic-UI-React组件实现了包含输入框和按钮的表单，代码如下：

<Segment clearing>
    <Form>
        <Form.Group style={{ display: "flex" }}>
            <Form.Field style={{ flexGrow: "1" }}>
                <Form.Input
                    placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                    focus
                />
            </Form.Field>

            <Form.Button
                    color="green"
                    floated="right"
                    content="Add new API key"
                    type='submit'
            />
        </Form.Group>
    </Form>
</Segment>

当前呈现效果：

我希望将Form.Input的占位符调整为右对齐，预期效果如下：

实现方法 #

要实现占位符右对齐，需要通过CSS伪元素控制placeholder的样式，具体步骤如下：

1. 定义CSS类
   创建一个CSS类，设置占位符的文本对齐方式为右：

.input-right-placeholder::placeholder {
  text-align: right;
  /* 可选：添加右侧内边距优化视觉效果 */
  padding-right: 8px;
}

2. 给Form.Input添加类名
   在Form.Input组件上添加上述定义的类名：

<Segment clearing>
    <Form>
        <Form.Group style={{ display: "flex" }}>
            <Form.Field style={{ flexGrow: "1" }}>
                <Form.Input
                    placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
                    focus
                    className="input-right-placeholder"
                />
            </Form.Field>

            <Form.Button
                    color="green"
                    floated="right"
                    content="Add new API key"
                    type='submit'
            />
        </Form.Group>
    </Form>
</Segment>

替代方案（CSS-in-JS） #

如果你使用CSS-in-JS方案（比如styled-components），可以直接封装一个自定义输入组件：

import styled from 'styled-components';
import { Form } from 'semantic-ui-react';

const RightPlaceholderInput = styled(Form.Input)`
  &::placeholder {
    text-align: right;
    padding-right: 8px;
  }
`;

// 使用时替换原Form.Input
<RightPlaceholderInput
  placeholder="XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXXXXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
  focus
/>

原理说明：HTML输入框的占位符样式需要通过::placeholder伪元素来修改，设置text-align: right即可实现右对齐效果。

内容的提问来源于stack exchange，提问作者Shury