如何在Grommet中删除边框与屏幕边框之间的间距
在Grommet中删除边框与屏幕边框之间的间距，可以通过以下步骤实现：
- 首先，确保你已经在项目中引入了Grommet库，并正确地设置了Grommet的主题。
- 在你想要删除边框与屏幕边框之间间距的组件上，添加一个自定义的CSS类名。例如，你可以给组件添加一个名为"no-margin"的类名。
- 在你的CSS文件中，定义这个自定义类名的样式，并设置margin属性为0。例如：
.no-margin {
margin: 0;}
- 将这个自定义类名应用到你想要删除间距的组件上。例如，在React中，你可以使用className属性将类名应用到组件上：
<Component className="no-margin" />
或者，在HTML中，你可以使用class属性将类名应用到元素上：
<div class="no-margin"></div>
通过以上步骤，你可以在Grommet中成功删除边框与屏幕边框之间的间距。请注意，这个方法适用于大多数Grommet组件，但对于一些特殊的组件，可能需要使用其他方法来删除间距。
相关·内容
1回答
不能包括React框架(Grommet)
reactjs、grommet
我在导入UI库时遇到了问题，蚂蚁设计库有问题，所以我决定尝试不同的库，现在我在导入Grommet时遇到了问题。
我做错了什么？我根据文档添加了依赖项，并添加了文档中包含的示例，但仍然无法工作。
我正在尝试执行
但看起来一点都不一样
我和codesandbox.io，一起工作
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Heading from "grommet/components/Heading&#
浏览 2提问于2018-10-05得票数 0
回答已采纳
2回答
React JS组件未应用CSS页边距
javascript、css、reactjs、jsx
使用react，我在Card.jsx文件中创建了一个非常简单的卡片组件。该组件如下所示。
class Card extends React.Component{
render() {
return (
<div className={style.mainContainer}>
<div className={style.container}>
<div className={style.title}>Hello world</div>
<div classNa
浏览 4提问于2020-12-07得票数 1
2回答
没有将CSS应用于reactJs组件
css、reactjs
在我的app.js：
[import React, {PropTypes} from 'react';
import { Navbar, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
const TopHeader = (props) => {
return(
<div>
<Navbar color="faded" light>
<NavbarBrand href="/">react
浏览 8提问于2016-09-26得票数 0
回答已采纳
3回答
React className命名约定
reactjs、naming-conventions
正如我们所知，在原始html中，我们应该使用小写和短划线作为css类名称(例如<div class="lower-case-dash" />)。那么在React JSX中呢？
对于html元素和其他React组件，css类名的命名约定是什么？camelcase还是dash？
<div className="divClass">Something</div>
<div className="DivClass">Something</div>
<div className="d
浏览 1提问于2019-07-26得票数 18
回答已采纳
1回答
jQuery砌体与边-右
jquery、html、css、jquery-masonry
我一行有两列，第一列的边距是对的，而第二列没有。我想使用jQuery砌体和它来删除空空间。然而，边缘权利似乎不适用于砖石。
如何保持相同的框宽并删除行中第二个框后的边距？
下面是HTML:
<div class="list">
<div class="item"></div>
<div class="item no-margin"></div>
<div class="item"></div>
<div c
浏览 1提问于2013-03-07得票数 0
回答已采纳
3回答
如何禁用div中特定元素的悬停效果？
javascript、html、css、reactjs
我想创建这个悬停效果： ? ? ? 基本上，当来自其子元素的特定元素悬停在其上时，阻止白色部分变暗。 下面是我的HTML代码： <div className= {css.searchBarDiv}>
<div className={css.searchBarContent}/>
<div className={css.searchBarButton}>
<div className={css.button}>
<Image/>
</div>
浏览 69提问于2021-10-10得票数 1
3回答
如何在桌面上将内容仅放入两列
html、css、reactjs、react-bootstrap
因此，在桌面版本中，这4个按钮应该以2x2的方式以2个一组的方式出现。问题是，在移动设备上，每一行都应该有单独的行。我使用bootstrap进行行/列操作，使用React进行前端操作。我通常在后端工作，所以我对html css方面一无所知。 <div class="flex-row h-75">
<div class="d-flex col-sm no-margin">
<div class="d-flex justify-content-end col-sm p-1
浏览 8提问于2020-04-07得票数 0
回答已采纳
3回答
CSS边距和填充未被应用
css、margin、padding
从本质上说，我有一系列的物品，用一个边框隔开。我希望在每个项目的顶部和底部应用相等的填充和毛边。
这里有一个，它包含了我正在使用的一个简化版本。
现在，您可以看到，我已经将10 of的margin和padding应用于每个项目的顶部和底部，但项目的间隔并不均匀。每件物品上面的空间比它下面的要多。
我意识到这可能是CSS的的结果，我可以通过添加更多的填充而不是空白来获得我想要的间距。
然而，问题是，对于一些项目，我想通过添加一个背景颜色来突出显示，比如这个。当我这样做的时候，顶部和底部的填充物必须是一样的。
那我该怎么解决这个问题呢？我希望它是超级灵活的，所以我可以自定义数量的填充和保证金，如果
浏览 2提问于2015-04-14得票数 1
3回答
如何使css只应用于一个页面，而不是所有页？
html、css
我正在学习css，我做了一个小网站，但是我搞砸了，它把第二页的边框应用到了第一页。下面是使用边框的部分的html
<div class="rickmorty">
<p>The rick and morty copypasta</p>
</div>
下面是它也应用到的html。
<div class="box-1">
<p>Test<br />Test again<br /></p>
</div>
下面是html正在应用的
浏览 4提问于2017-10-27得票数 0
回答已采纳
1回答
大于屏幕高度的内容
html、css
我创建了一个html文件，其中包含一个页眉div、一个内容div和一个页脚div。滚动条应该显示为"bodyDiv“标记(它确实显示)。
现在来问我的问题:为什么"bodxDiv“中的内容比屏幕高度大？因此，滚动条也出现了--如果没有必要的话。
在图片中您可以看到，内容在红线之后结束，但是仍然有一个滚动条。
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr
浏览 1提问于2014-07-28得票数 0
回答已采纳
我有3个组件: 1.头组件；2.搜索组件；3.家庭组件；
Home Comp包含我的用户列表，Header Comp包含搜索Comp，因此我想将我的searchString传递到Home Comp，在Header Comp之间传递。
我在寻找类似事件发射器的东西，但我不能将它应用到我的代码中。
家庭薪酬：
<div class=" container-fluid">
/.../
<app-search></app-search>
</div>
搜索组件：
<div class="row no
浏览 0提问于2019-04-05得票数 0
2回答
为什么我的背景色没有从CSS中应用？
css、reactjs、background-color
我有一个小的css问题，在我的反应应用程序，但我找不到一个方法来解决它。
无论设置的颜色(十六进制、rgb或rgba)，我的div的背景总是白色的。甚至边框半径也不起作用，但是宽度/高度和边距都很好。
这是我的密码：
card.js
import React from "react";
import "../styles/card.css";
export default class Cards extends React.Component {
render() {
return (
<div className="ca
浏览 3提问于2020-03-23得票数 0
回答已采纳
2回答
不能跨组件使用相同的类名。CSS未在样式组件内限定作用域
html、css、reactjs、styled-components、css-in-js
我遇到的问题似乎违背了CSS在JS中的用途。我使用的是样式组件。当我试图使用一个类名时，这个类名正在react树中的某个样式组件中使用。上面的组件classname样式以某种方式应用于我在树中使用的类名。
重现步骤
在react项目中的任意位置呈现UpperComponent。
const StyledContainer = styled.div`
.title {
color: red;
margin-bottom: 32px;
}
`;
const UpperComponent = () => {
return (
<StyledConta
浏览 6提问于2020-11-06得票数 0
1回答
无法为小型设备在挠性框内设计三种元素
html、css、reactjs、flexbox、styling
我是第一次使用react来构建我的投资组合，在小设备的情况下，我用flex格式化了三个元素，在全屏上一切都很好。
我想要的是:全尺寸的(这个案子没问题)：
在小型设备中，我现在要检索的是：
我想要的是：
图像应该在社会图标的同一行，我也希望文本“Hello I‘s Amedeo .和按钮”垂直地从社会图标的同一位置开始。
所使用的代码是：
HTML：
function Intro() {
return (
<IntroStyled>
<div className="item-1"
浏览 12提问于2022-05-15得票数 0
1回答
反应js :儿童风格不显示
javascript、css、reactjs、react-hooks、jsx
我试图创建一个组件‘卡片’，并使用它作为一个容器。代码在没有“卡片”的情况下运行良好。当我试图添加它时，ExpenseItem.css中的‘ExpenseItem.css’和费用项不起作用
这是'ExpenseItem.js'：
import Card from './Card';
import ExpenseDate from './ExpenseDate';
import './ExpenseItem.css';
function ExpenseItem(props) {
return (
<Card c
浏览 10提问于2022-06-12得票数 0
回答已采纳
1回答
css -加载器嵌套组件的css模块规则
reactjs、webpack、sass、css-loader、css-modules
假设我使用scss模块的方式如下
A.jsx
import styles from './A.module.scss';
import B from '../B/B.jsx';
const A = props => {
return <div className={styles.a}>
<B/>
</div>;
};
export default A;
B.jsx
import './B.scss';
const B = props => {
retu
浏览 0提问于2019-07-15得票数 2
1回答
Vue -使用Click实现普通javascript的动画差异
javascript、html、css、vue.js、vuejs2
我是跟随的制作动画。
它只使用html、css和普通的javascript。
这就是我所期望的，膨胀和塌陷是平滑的。
html
HTML CSS JSResult Skip Results Iframe
EDIT ON
<div class="box">
<div class="top">
<h1>Lorem Ipsum</h1>
</div>
<p class="text">Lorem ipsum dolor sit amet, consect
浏览 1提问于2021-10-24得票数 2
回答已采纳
3回答
如何设置带有空格和自定义长度的"a link“按钮的垂直列表？
html、css
我正在设计一个网站，我遇到了与链接相关的列表项的格式问题。如果你通过浏览器运行代码，它会显示我现在所在的网站。我想让“按钮”彼此分开，这样它们的垂直显示效果就很好，而不是相互重叠。另外，我一直在想如何调整边框的宽度，使所有三个按钮的宽度相同。
此外，我一直在尝试当鼠标悬停在边框上时改变边框的颜色，但Stack Overflow上其他相关帖子的答案对我来说都不起作用。
/* Global Layout Set-up */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
text-align: cent
浏览 0提问于2016-07-02得票数 0
2回答
外部Css在Gatsby react项目中不起作用
reactjs、gatsby
我不确定这是否是在gatsby中使用CSS的正确方式，但是由于某些原因，我的外部CSS没有被应用到gatsby项目中。
这就是我正在做的事情
import { Link } from "gatsby"
import PropTypes from "prop-types"
import React from "react"
import "./header.css"
const Header = (props) => {
return (
<header
style={{
backgroun
浏览 1提问于2019-12-21得票数 0
3回答
当我使用Javascript时，ID接管了我的类
javascript、html、css
我已经对这个问题坐了两个小时了。我想做的是一个网站，在那里你按下一个按钮，它就会改变颜色。我知道这可以用CSS来完成，但我对此不感兴趣。
主要的问题是，当我按下按钮时，什么也没有发生。但是，如果我从css中去掉‘#sug’，一切都能正常工作……所以我想要做的是，让布局在一开始就非常基本，所以除了黑色背景之外，没有其他东西，当我按下按钮时，它应该会切换。
此外，我知道您可以在按钮标记中实现onclick，但这也不是我要做的。我想知道为什么会发生这种情况，以及我如何解决这个问题。
下面是我的javascript、CSS和HTML代码：
window.onload = setUp;
funct
浏览 1提问于2016-09-20得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
