发表新帖
发表新帖

How to change the style of a Ant-Design 'Select' component?

后端 未结
关注
7 1686
栀梦
栀梦 2021-01-02 07:57

Suppose I want to change the standard white background color of the Select component to green.

My try...
提交评论
  •  加载中...
  • 佛祖请我去吃肉
    2021-01-02 08:20

    They implemented this feature with v4 of ant design:
    https://github.com/ant-design/ant-design/pull/21064

    But beware before blindly upgrading from v3 -> v4 - a lot has changed:
    https://github.com/ant-design/ant-design/issues/20661

    0 讨论(0)
  • 遇见更好的自我
    2021-01-02 08:23

    <Select> renders a whole set of <div>s, you need to take a look at the resulting HTML element tree to understand what you are doing. You can't do it through the style attribute, you need to do it in CSS.

    The proper place to attach a background color is

    .ant-select-selection {
  background-color: green;
}

    This will make all your selects green. Give them individual classNames if you want different colors for different selects.

    0 讨论(0)
  • 南笙
    2021-01-02 08:27

    From their official docs https://pro.ant.design/docs/style

    Override the component style Because of the special needs of the project, we often meet the need to cover the component style, here is a simple example.

    Antd Select In multi-select state, the default will show all the select items, here we add a limit height for display scroll bar when the content beyond this height.

    // TestPage.ts
import { Select } from 'antd';
import styles from './TestPage.less';
const Option = Select.Option;

const children = [];
for (let i = 10; i < 36; i++) {
  children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

ReactDOM.render(
  <Select
    mode="multiple"
    style={{ width: 300 }}
    placeholder="Please select"
    className={styles.customSelect}
  >
        {children}
      
  </Select>,
  mountNode,
);

    /* TestPage.less */
.customSelect {
  :global {
    .ant-select-selection {
      max-height: 51px;
      overflow: auto;
    }
  }
}

    Two points need to be noted:

    The imported antd component class name is not translated by CSS Modules, so the overridden class name .ant-select-selection must be put in :global. Because of the previous note, the override is global. To avoid affecting other Select components, the setting needs to be wrapped by an extra classname to add range restriction

    0 讨论(0)
  • 名媛妹妹
    2021-01-02 08:31

    For my form with Select element a have some code in render:

    const stateTasksOptions =
    this.tasksStore.filters.init.state.map(item =>
        <Select.Option key={item.id} value={item.id} title={<span className={`${item.id}Label`}>{item.title}</span>}>
            <span className={`${item.id}Label`}>{item.title}</span> - <span class="normal-text">{item.help}</span>
        </Select.Option>
    )

return (
    ....
    <Select
        mode="multiple"
        value={this.tasksStore.filters.selected.state.map(d => d)}
        onChange={this.handleTasksStatus}
        optionLabelProp="title"
    >
        {stateTasksOptions}
    </Select>
    ....
)

    And some css for colorizing.

    Result:

    0 讨论(0)
  • 予麋鹿
    2021-01-02 08:33

    with all the above answers you cant change the styles of tags conditionally but with below approach you can.

    You can do a hack and change the styles as you like of tags of select dropdown. You can use dropdownRender of select which takes 2 arguments

    • menuNode
    • props

    use props children property to reach to each tag and change the styles and you can conditionally change the styles as you like.

    for reference below is the example link for code sandbox

    Select Tags Styles Sanbox

    May not be an efficient way to do it but you can use this for now to meet your business requirement.

    Thanks

    0 讨论(0)
    • 1 2 下一页
     看不清?
    提交回复
    热议问题