小编Jab*_*ian的帖子

我正在使用MUI库来创建我的React Js应用程序。

在这里，我使用受控文本字段组件来创建一个简单的搜索 UI。

但有一点奇怪。组件Text Field在其值更改后失去焦点。 这是我第一次遇到这个问题。我以前从未遇到过这个问题。

怎么会发生这种事？以及解决办法是什么。

这是代码和游乐场： https: //codesandbox.io/s/mui-autocomplete-lost-focus-oenoo？

breakpoint type注意：如果我从代码中删除，Text Field组件在其值更改后仍然会失去焦点。

我在 React Js 应用程序中使用Material UI V4 数据网格组件。

该Data Grid组件具有必需的rows( listtype) 和columns( listtype) 属性。

以下是行项目的示例：

const rows = [
  {
    id: 1,
    customerName: "Silvestr Irma",
    carModel: {
      name: "Centurion",
      color: "red"
    },
    location: {
      name: "Belgium",
      address: "avenue Verheyen 93"
    }
  },
];

这是列列表的示例：

const columns = [
    {
      field: "customerName",
      headerName: "Custom Name",
      flex: 1,
      minWidth: 200
    },
    {
      field: "carModel",
      headerName: "Car Model",
      flex: 1,
      minWidth: 200,
      renderCell: (params) => …

我在 React Js 应用程序中使用 Material UI 或MUI v5组件作为 UI 库。

DataGrid我正在/组件内创建自定义编辑和删除行DataGridPro。

规范是显示悬停行的编辑和删除图标，但不是通过添加新列（不添加操作列）。我在这里找到了私人仪表板的示例。

因此，如果用户减小浏览器的宽度，编辑和删除图标不会被隐藏，而是会隐藏该行，如下图所示。

我在这里做到了https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/demo.js但我发现了以下一些缺点：

1.组件渲染在组件Popper之上DataGrid

当我们的鼠标光标悬停在未完全显示的行上时，该Popper组件将如下图所示显示。

我尝试将disablePortal={true}prop 添加到 Popper 组件，但它会使Popper组件呈现在行外部，如下图所示。

我还尝试更改zIndex组件的列标题（变为 1000）、行（变为 10）和分页容器（变为 1000）的 propDataGrid也更改了组件zIndex的 prop Popper（变为 100），但Popper组件仍然不变渲染在组件顶部，DataGrid如下图所示。

问题 1：我应该怎样做才能使Popper组件呈现在行的顶部但仍在DataGrid组件内部，如下图所示？

2、元件与元件Popper之间没有粘连DataGrid

如果我添加一些新列，该Popper组件就会粘在行的末尾，如下图所示。这就是我想要的条件。

如果我们将鼠标滚动到行的开头，则Popper组件不会像下图那样粘在行的末尾。这不是我想要的条件。

问题 2：无论水平滚动鼠标（如下图所示），我应该怎样做才能使 Popper 组件粘在行尾？

这是演示https://codesandbox.io/s/learn-mui-data-grid-hover-row-367vh?file=/Demo2.jsx

或者有没有更好的方法来实现这个案例？

我正在Data Grid Toolbar通过修改Material-UIGrid Toolbar中的现有组件来创建自定义组件。

这是组件的官方示例Grid Toolbar：

如果我们单击其中一个Grid Toolbar组件，它将显示一个弹出窗口/弹出窗口，如下面的屏幕截图所示。

我想要做的是更改每个Grid Toolbar组件的每个弹出窗口/弹出窗口内的所有字体大小。

例如，我尝试更改一个文本。从下面的屏幕截图中我们可以看到，如果我们检查文本然后直接更改font-size和属性，它就会发生变化。color

但是，如果我抓取并复制选择器（在本例中是.MuiTypography-body1），然后将其粘贴到我的代码中，则不会发生任何变化（font-size和color属性不会改变）。

这是简单的代码：

const CustomGridToolbarColumns = withStyles((theme) => ({
  root: {
    color: "dodgerblue",
    "& .MuiTypography-body1": {
      fontSize: 20,
      color: "red"
    }
  }
}))(GridToolbarColumnsButton);

我还想更改每个组件的每个弹出窗口/弹出窗口内的font-size所有属性。我检查弹出窗口/弹出窗口，然后更改和属性，但仍然不起作用，如下面的屏幕截图所示。colorGrid Toolbarfont-sizecolor

以下是依赖项（在 package.json 文件中）：

"@material-ui/core": "^4.12.3",
"@material-ui/styles": "^4.11.4",
"@mui/x-data-grid-pro": "^4.0.0",

这是完整的代码：https://codesandbox.io/s/data-grid-material-ui-custom-toolbar-kd9gj

所以我的问题是：

1. 我们如何更改每个Grid Toolbar组件的弹出窗口/弹出窗口内的某些属性？ …

我使用 Material UI 组件来创建 React Js 应用程序。

首先，我想改变宽度和高度首先，我想从 Material UI 组件更改KeyboardDatePicker

这是第一个条件：

这是开始和结束日期选择器的代码：

<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="Start Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={startDate}
            onChange={changeStartDate}
        />
    </MuiPickersUtilsProvider>
</div>
<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="End Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date',
            }}
            keyboardIcon={<TodayIcon style={{color: colors.customCornFlowerBlue}}/>}
            value={endDate}
            onChange={changeEndDate}
        />
    </MuiPickersUtilsProvider>
</div>

然后我尝试通过向两个日期选择器添加 InputProps 和 style 属性来更改两个日期选择器的宽度和高度：

<div>
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker 
            disableToolbar
            label="Start Date"
            variant="inline"
            inputVariant="outlined"
            format="dd/MM/yyyy"
            KeyboardButtonProps={{
                'aria-label': 'change date', …

我正在创建一个 Android 应用程序，使用 Android Studio 扫描附近的所有 BLE（低功耗蓝牙）设备。

我想我已经实现了所有这些文档：

1. https://developer.android.com/guide/topics/connectivity/bluetooth/ble-overview
2. https://developer.android.com/guide/topics/connectivity/bluetooth/permissions#java
3. https://developer.android.com/guide/topics/connectivity/bluetooth/setup#java
4. https://developer.android.com/guide/topics/connectivity/bluetooth/find-ble-devices

但正如您在下面的日志中看到的，（问题）应用程序没有扫描到 BLE 设备。

以下是 logcat 中的日志：

我认为这可能会发生，因为BLE scan callback未调用（日志中没有 BLE 扫描回调）。

所以我的问题是我的代码的解决方案是什么？我错过了编码吗？

这是我的代码

AndroidManifest.xml：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example">

    <uses-permission android:name="android.permission.BLUETOOTH" />
    <uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

    <uses-feature
        android:name="android.hardware.bluetooth_le"
        android:required="true" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.Example">
        <activity android:name=".ui.authentication.signin.SignInActivity" />
        <activity android:name=".ui.authentication.signup.SignUpActivity" />
        <activity android:name=".ui.home.HomeActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

蓝牙助手.java：

package …

我正在使用Material UI v4库来构建 React Js 应用程序。

我创建了一个自定义浮动操作按钮 (FAB) 组件。

FAB 组件（下图中的红色框）必须粘贴到其父元素即 Flyout 组件（下图中的蓝色框）的右下角（有一些边距）。

Fylout 组件内部有一些子组件。它们是标题、Content 组件（Material UI 中的示例 Card 组件）和 FAB 组件。

由于某种原因，Flyout 组件的根元素必须具有absolute position可滚动 ( scroll: 'auto')（我无法在此处提及它们）。

我用于absolute positionFAB 组件。结果很好（当卡未展开时），如下图所示：

但是，当 Card 组件展开并且我们滚动 Flyout 组件时，FAB 组件并没有从其父组件中粘住更多，如下面的屏幕截图所示：

我尝试position: 'sticky'将 FAB 组件与bottom: 20和 一起使用right: 20，但 FAB 并未粘在 Flyout 组件的右下角，如下面的屏幕截图所示：

所以我的问题是如何使 FAB 按钮仅粘在 Flyout 组件的右下角？

这是简化的代码：https ://codesandbox.io/s/fab-stick-to-parent-w5ng3