小编Tay*_*ach的帖子

也许不是正确的方法，但我想为标题创建一些“全局”样式。像这样的东西：

const myTheme = createMuiTheme({
    headings: {
        h1: {
            fontSize: 28,
            // Obviously this does not work...
            [theme.breakpoints.down('sm')]: {
                fontSize: 24
            },
        },
        h2: {
            fontSize: 24,
        }
    }
}

然后我可以像这样在我的组件中使用它们：

const styles = (theme) => ({
    myElement: {
        ...theme.headings.h1,
        // ... other styles
    }
}

这确实有效，但我面临的问题是我希望标题具有响应性并尊重 Material UI 的断点，但我不能在 createMuiTheme 本身中使用它们？有什么方法可以正确执行此操作，以便我可以将所有样式都包含在响应式样式中？

我想要做的就是制作最基本的Mac OS X应用程序,它只显示一个WKWebView ...

import UIKit
import WebKit
class ViewController: UIViewController, WKUIDelegate {

var webView: WKWebView!

override func loadView() {
    let webConfiguration = WKWebViewConfiguration()
    webView = WKWebView(frame: .zero, configuration: webConfiguration)
    webView.uiDelegate = self
    view = webView
}
override func viewDidLoad() {
    super.viewDidLoad()

    let myURL = URL(string: "https://www.apple.com")
    let myRequest = URLRequest(url: myURL!)
    webView.load(myRequest)
}}

https://developer.apple.com/documentation/webkit/wkwebview

我的目标是如果用户进一步滚动到视频元素，则将位置更改为视频元素。我使用的是Intersection Observer API，因为我需要处理AdForm Banner / iFrame中的页面滚动。

这是我的代码：

function createObserver() {
  var observer;
  var options = {
    root: null,
    rootMargin: "0px",
    threshold: buildThresholdList()
  }; 
  observer = new IntersectionObserver(handleIntersect, options); 
  observer.observe(boxElement);
}

这是handleIntersect函数：

function handleIntersect(entries, observer) { 
  entries.forEach(function(entry) {
    if (entry.intersectionRatio > prevRatio) {
      console.log("VIDEO IN");
      p.style.position = "relative";
    } else if(entry.intersectionRatio === 0 && scrolled === 1 ) {
      console.log("VIDEO OUT");
      p.style.position = "fixed"; 
    }
  });
}

这是我的代码笔：https ://codepen.io/alex18min/pen/gXXYJb

它可以在Chrome / Firefox / Edge和Android设备上完美运行，但通常不能在iOS和Safari上运行，似乎未检测到监听器。

有人能帮我吗？先感谢您。

.my-sprite {
  background-image: url("https://i.stack.imgur.com/lJpW8.png");
  height: 100px;
  width: 100px;
  background-position: 0 0;
  background-position: -200px 0px;
}

<div class="my-sprite"></div>

我无法让我的精灵缩放到更小的尺寸。我希望它是实际大小的一半，即 100x100px，如何使用background-size属性缩放它？现在它只显示 100x100px 的完整图像尺寸...

我的项目是一个桌面Electron应用程序，单击该应用程序会刮擦一个网站。简单。

我的项目在本地运行正常（当然），但是当我去运行npm run package-win并创建Windows生产应用程序时，我相信当操纵up尝试启动浏览器时会出现错误。

我只在为Windows构建时才得到这个。在我的Mac上构建它可以正常工作并且没有错误...

Chromium revision is not downloaded. Run "npm install" or "yarn install"  at Launcher.launch

我尝试删除package.lock，node_modules文件夹，并且当然npm install按照建议的方式运行。我认为这与版本控制有关吗？这是我的package.json文件：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My project description.",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package-win": "electron-packager . my-project --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"My Project\""
  },
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^2.0.12",
    "electron-packager": "^12.2.0"
  },
  "dependencies": {
    "electron-json-storage": "^4.1.4",
    "nodemailer": "^4.6.7",
    "puppeteer": "^1.8.0"
  }
}

我可以说我的try catch失败了，因为错误消息来自catch，所以此块中的某些内容失败了，但仅限于生产版本中：

  async …

以为一切都很顺利。在 Chrome、FF、Edge，甚至 IE 11 中完美运行！

父组件保存所有的状态。我将bets 对象传递给子组件，该子组件计算一个计数并传递给孙组件进行显示。

父状态“bets”是一个对象，其中键作为 ID，值作为对象。

当我与应用程序交互时，父状态会正确更改。为什么当父状态改变时只有 Safari 不会更新？（在 iOS 和 MacOS 上）

家长

class ParentComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            bets: {}
        };
    }
}

孩子

getBadgeCount = (league) => {
    const bets = this.props.bets;
    let count = 0;
    Object.keys(bets).map((bet) => bets[bet].event.league === league && count++);
    return count;
};

// ...

<ChildItem count={this.getBadgeCount(league)} />

孙子

class GrandChildComponent extends React.Component {
    render() {
        const { count } = this.props;
        return (
            <div>
                <div> …

所以我有一个使用 Next.js 的 SSR 应用程序。我使用的是利用 WEB API 的第 3 方组件，因此需要将其加载到客户端而不是服务器上。我正在使用“两遍”渲染来完成此操作，我在这里阅读了相关内容： https: //itnext.io/tips-for-server-side-rendering-with-react-e42b1b7acd57

我试图弄清楚为什么当 next.js 页面中的“ssrDone”状态发生变化时，整个<Layout>组件会不必要地重新渲染，其中包括页面的页眉、页脚等。

我已经阅读了有关React.memo()利用的内容shouldComponentUpdate()，但我似乎无法阻止它重新渲染组件<Layout>。

我的 console.log 消息触发<Layout>两次，但<ThirdPartyComponent>控制台消息按预期触发一次。这是一个问题吗，还是 React 足够聪明，不会实际更新 DOM，所以我什至不应该担心这个。无缘无故地让它重新渲染我的页眉和页脚似乎很愚蠢。

在控制台中，输出为：

Layout rendered
Layout rendered
3rd party component rendered

index.js（下一个.js 页面）

import React from "react";
import Layout from "../components/Layout";
import ThirdPartyComponent from "../components/ThirdPartyComponent";

class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ssrDone: false
    };
  }

  componentDidMount() {
    this.setState({ ssrDone: true });
  }

  render() …

试图找出为什么 Lighthouse 审核将我的一堆链接标记为未通过elements have discernible names

<h3>
  <a href="https://..." class="custom classes here">My New Post Title</a>
</h3>

我的问题是所有链接都需要吗aria-labels，因为我想如果这只是一个普通链接，则链接内的文本就是所需要的？

或者我的标记结构还有其他问题吗？另一个标记元素是这个：

<a class="custom classes" href="https://...">
  <div class="custom classes" style="background-image: url('https://...');"></div>
  <div class="article-thumbnails-small__title">Post Title</div>
</a>

对于那个，我知道a没有文本，所以aria-label应该放在带有实际帖子标题的 div 上，对吗？

已解决 我看错了元素...祝你有美好的一天。