You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

是否存在禁用React UI右上角「New」控件的配置选项?

Disabling/Removing the "New" Button in React UI's Top-Right Corner

Hey there! Great question—let me walk through your options for handling that "New" button, depending on how your React UI is built:

If you're using a third-party UI library (like Ant Design, Material-UI, etc.)

Most popular React UI libraries provide built-in props to toggle or disable action buttons like this:

  • Ant Design: For components like ProTable or List, look for props like toolbar={{ showCreateButton: false }} to hide the "New" button entirely. If you just want to disable it, check if the button component accepts a disabled prop you can control with state.
  • Material-UI: For components like DataGrid, you can customize the toolbar by overriding the Toolbar component. Create a custom toolbar that omits the "New"/add button, then pass it via components={{ Toolbar: CustomToolbar }}.
  • General tip: Always check the official docs for your specific library—they almost always have a dedicated section for customizing toolbar actions or hiding default buttons.

If it's a custom-built React component

If you or your team built the UI from scratch, you have full control:

  • Remove the button: Add a conditional render based on a prop or state. For example:
    // Parent component
    <YourComponent showNewButton={false} />
    
    // Inside YourComponent
    {props.showNewButton && <Button className="new-button">New</Button>}
    
  • Disable the button: Use the disabled attribute tied to a state or prop:
    <Button className="new-button" disabled={props.isNewButtonDisabled}>New</Button>
    

If you can't find a built-in config or prop (e.g., a third-party library that doesn't expose this option), you can hide it with CSS. Just target the button's class or selector:

.new-button {
  display: none;
}

Note: This is a hack—if the library updates its class names or DOM structure, this might break. Always prefer using the component's official API first.

Hope this gives you clear paths to solve this! If you're using a specific UI library, feel free to share more details and I can narrow down the exact steps.

内容的提问来源于stack exchange,提问作者kshouler

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.21 08:35:20