小编sno*_*ard的帖子

我有

<table class="table table-condensed">

我曾经table-bordered在那里,但它给了我行之间的行.我只想要整个表格外侧的顶部,底部,左侧和右侧线条,并且行之间没有线条.

此外,我尝试先做婴儿步骤,因此尝试删除行之间的行,如此处所示 删除twitter bootstrap中的行行 并给出解决方案

table td {
    border-top: none;
}

不适合我

使用 @material-ui/core V4（确切地说是 4.12.3）我使用 webpack 和 babel 成功创建了一个自定义元素。我曾经使用@material-ui/core makeStyles 来设计它。现在我正在升级到 @mui/material v5 并希望使用 @mui/material 中的内置组件，但它们不会在自定义元素中显示样式。请注意，我需要这是一个自定义元素，因为它将集成到另一个托管应用程序中。

v4 之前的 index.tsx

import AppComponent from './App';
import { render } from 'react-dom';
import { StylesProvider, jssPreset } from '@material-ui/core/styles';
import { create } from 'jss';

class MyWebComponent extends HTMLElement {
    connectedCallback() {
        const shadowRoot = this.attachShadow({ mode: 'open' });
        const mountPoint = document.createElement('custom-jss-insertion-point');
        const reactRoot = shadowRoot.appendChild(mountPoint);
        const jss = create({
            ...jssPreset(),
            insertionPoint: reactRoot,
        });

        render(
            <StylesProvider jss={jss}>
                <AppComponent />
            </StylesProvider>,
            mountPoint
        );
    } …

我有一个textarea,我想要几个按钮,总是在textarea下面,并与文本区域的右下角对齐.我得到的最接近的是这个小提琴http://jsfiddle.net/leopardy/2uwDT/1/, 但是它甚至没有与textarea一致向右对齐,更糟糕的是当我通过调整大小抓取器调整textarea的大小时右下角的三角形,我将文本区域的右侧向右或向左移动)按钮变得更加偏向(甚至更远离textarea的右侧).需要注意的是,textarea必须能够调整大小,我不能在一定的大小.

HTML

<div class="descriptionarea">
    <span class="namefortxtarea">Description</span>
    <textarea ></textarea>
    <span class="buttonfortxtarea"><button class= "btn btn-mini description_edit">Edit</button><button class= "btn btn-mini description_submit">Submit</button></span>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

.descriptionarea {
   width: 490px;
   position: relative;
}

.descriptionarea textarea{
    width: 490px;
    height: 20px;
}

.descriptionarea span.namefortxtarea{
    display: block;
    text-align: left;
    font-size:12px;
}

.descriptionarea span.buttonfortxtarea{
    display: block;
    text-align: right;
}

请注意，这是针对 MUI v5 @mui/material 的，而不是使用 v4 @material-ui/core

最终弄清楚如何在使用情感入口点插入作用域阴影 DOM 样式时显示 @mui/material 样式（请参阅这篇文章如何在 React 自定义元素中为 MUI Material v5 的 MUI Material v5 创建插入点以在阴影 dom 中安装样式） ，事实证明，对于包含 @mui/material 组件的 Demo 组件，选择下拉列表的样式不正确。

这是 stackblitz https://stackblitz.com/edit/react-d8xtdu-s2cufr?file=demo.js

import React from 'react';
import Demo from './demo';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import { StylesProvider, jssPreset } from '@mui/styles';
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';
import { create } from 'jss';
import { render } from 'react-dom'; …