小编Nis*_*hah的帖子

我今天（2020 年 4 月 3 日）创建了一个新的 react-native 项目并添加了一个 native-base。然后我尝试使用浮动标签添加输入。它给出了一条警告消息：动画：useNativeDriver未指定。这是一个必需选项，必须显式设置为true或false。如果我删除了浮动标签属性或将其更改为 stackLabel 警告消失了。出现此警告时，onChangeText未调用。

组件文件

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  View,
} from 'react-native';

import {Input, Item, Label} from 'native-base';

import {Colors} from 'react-native/Libraries/NewAppScreen';

declare var global: {HermesInternal: null | {}};

const App = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <View style={styles.body}>
            <Item floatingLabel>
              <Label>Test</Label>
              <Input onChangeText={text => console.log(text)} />
            </Item>
          </View>
        </ScrollView> …

我正在使用官方引导程序文档中的代码创建一个简单的复选框：

<div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
    <label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>

我想知道如何使复选框比当前大？我曾尝试编辑 csscustomCheck并更改高度和宽度属性，但这不会增加框的大小。

我将我的 chrome 浏览器更新为83并看到option tag它看起来很难看，它在选项中悬停时显示黑色边框。

我试过

option {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option:hover {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option:hover {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option {
  box-shadow: none;
  border: none;
  -webkit-appearance: none;
}

option:hover {
  box-shadow: none;
  border: none;
  -webkit-appearance: none;
}

但仍然没有运气！！为什么？我不知道。

我想删除那个黑色边框，因为在我的项目中它看起来很难看。

我的需要

我需要与之前的 select 和 option 标签相同的结果。

我是Sass（SCSS）的新手。在Sass中，我遵循7-1 pattern，目前正在使用Phpstorm作为IDE。

我将所有_<name>.scss文件导入一个名为main.scssfile的主文件中。

问题

我在_variables.scss文件中定义了颜色变量，但是当我在其他.scss文件中使用它时，PhpStorm会给出如下错误

元素'gutter-horizo​​ntal'（变量名）仅按名称解析，而不使用显式导入。更多...

我还提供了我的IDE的屏幕截图，因此，您知道我的文件夹的结构。

我检查了整个互联网，但找不到任何解决方案，这不是这个问题的重复问题，好！

但

当我将我_variables.scss的scss文件导入时，错误消失了。

题

那么，我需要导入vaiables.scss所有的scss文件还是做错了什么？

我不明白这个问题来自哪里？Sass还是PhpStorm？

variables.scss

// COLORS

$color-primary: #55c57a;
$color-primary-light: #7ed56f;
$color-primary-dark: #28b485;
$color-gray-dark: #777;

$color-black: #000;
$color-white: #fff;

// GRID

$grid-width: 114rem;
$gutter-vertical: 8rem;
$gutter-horizontal: 6rem;

main.scss

@charset "UTF-8";

@import 'abstracts/variables';
@import 'abstracts/functions';
@import 'abstracts/mixins';

@import 'base/animations';
@import 'base/base';
@import 'base/typography';
@import 'base/utilities';

@import 'components/buttons';

@import 'layout/header';
@import 'layout/grid';

@import 'pages/home';

我为我的练习制作了小米时钟,但有一个问题,我不能制作色彩表盘.我希望逐个在表盘中传播白色,并且它以三角形和后面的表盘不透明度减少.

这是我想要实现的IMG: -

视频 :- https://vimeo.com/262815342

Codepen

var clock = "";

for(var i = 0; i < 360; i++){
	clock += "<div id='dials'><div id='cutline'></div></div>";
}
//clock += "<div id='circle'></div>";
clock += "<div id='dot'></div>";
clock += "<div id='mline'></div>";
clock += "<div id='hline'></div>";
clock += "<div id='tringleM'><div id='tringle'></div><div class='shadow'></div></div>";

document.getElementById('container').innerHTML = clock;

for (var i = 1; i <= 360; i++) {
	document.querySelector('#dials:nth-child('+i+')').style.transform = "rotate("+ (i-1) +"deg)";
}

/* Real Time Clock */
var hour, min, lol, lol1, …

问题在标题中描述。我有一个 Bootstrap 4 模态和一个带有按钮的输入字段的弹出框。在 IE 11 中一切正常，但在 Firefox 中输入失去焦点。

弹出框：

$('[data-toggle="popover"]').popover({
    container: "body",
    sanitize: false,
    content: function () {
        return $("#choose-user-popover-content").html();
    }
}).on('shown.bs.popover', function () {
    $('#ExecutorSNPSearchStr').focus();
});

弹出框 html：

<div id="choose-user-popover-content" style="display: none;">
<div class="row">
    <div class="col">
        <div class="input-group">
            <input type="text" class="form-control" id="ExecutorSNPSearchStr" aria-describedby="ExecutorSNPSearchStrAddon"/>
            <div class="input-group-append" id="ExecutorSNPSearchStrAddon">
                <button class="btn btn-sm btn-outline-info w-3" type="button">
                    <i class="fas fa-search"></i>
                </button>
                <button class="btn btn-sm btn-outline-danger w-3" type="button">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </div>
        </div>
    </div>
</div>

https://i.stack.imgur.com/rTe2q.png

谁能告诉这是什么原因，以及如何解决这个问题？

UPD：我在一个单独的 html 文件中重新创建了这种情况。

$('[data-toggle="popover"]').popover({
    container: …

我正在阅读material-ui组件的官方文档Drawer，我发现了一个containerprop，但我不知道它来自哪里。它的 API 文档中没有提及。这是内置的 React 组件的 props 之一吗？

下面是来自material-ui的响应式抽屉组件的屏幕截图： https: //material-ui.com/components/drawers/#responsive-drawer

我正在尝试自定义引导程序开关，但由于中间切换器而无法执行。

在定制中，我想增加开关的宽度和高度，这样每个人都可以在不同的分辨率下看到不同的开关，我在其中使用*-sm, *-md, *-lg, *-xl这些类，所以我想要像custom-switch-sm, custom-switch-md, custom-switch-lg, custom-switch-xl.

我在我的项目中使用 SCSS，但 CSS 解决方案也将受到欢迎。

我尝试更改 Bootstrap 开关的整个代码，但它看起来不像原来的那样。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Default Unchcked Switch</label>
</div>

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch2" checked>
  <label class="custom-control-label" for="customSwitch2">Default Checked Switch</label>
</div>