Javascript ReactJS中的样式化组件自定义CSS

实际上，我在使用React中的样式化组件进行CSS时遇到了问题。下面给出的是代码片段

import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';

const Styles = styled.div`
  .navbar {
    background-color: black;
    position: absolute;
    bottom: 0;
    width: 100%;
  }
  .h1 {
    color: white;
  }
`;

const Footer = () => {
  return (
    <Styles>
      <Navbar>
        <Container>
          <Row>
            <Col sm={{ size: 4 }}>
              <h1>Hi</h1>
            </Col>
          </Row>
        </Container>
      </Navbar>
    </Styles>
  );
};

export default Footer;

从“React”导入React；
从“reactstrap”导入{Navbar，Container，Row，Col}；
从“样式化组件”导入样式化；
const Styles=styled.div`
navbar先生{
背景色：黑色；
位置：绝对位置；
底部：0；
宽度：100%；
}
.h1{
颜色：白色；
}
`;
常量页脚=（）=>{
返回(
你好
);
};
导出默认页脚；

---

我想做的是将

h1

标记的颜色更改为白色，但上面的自定义CSS不起作用。我也尝试过背景色，但问题仍然存在。

您在css中使用了

.h1

类，而不是

h1

标记

---

您在css中使用了

.h1

类，而不是

h1

标记

---

对于

样式化组件

，您不应该使用类来设置元素的样式。您应该为组件使用单独的包装器，这是要点。我想你想做这样的事情：

import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';

const StyledNavbar = styled(Navbar)`
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
`;

const Header = styled.h1`
  color: white;
`;

const Footer = () => {
  return (
    <StyledNavbar>
      <Container>
        <Row>
          <Col sm={{ size: 4 }}>
            <Header>Hi</Header>
          </Col>
        </Row>
      </Container>
    </StyledNavbar>
  );
};

export default Footer;

从“React”导入React；
从“reactstrap”导入{Navbar，Container，Row，Col}；
从“样式化组件”导入样式化；
const StyledNavbar=已设置样式（导航栏）`
背景色：黑色；
位置：绝对位置；
底部：0；
宽度：100%；
`;
const Header=styled.h1`
颜色：白色；
`;
常量页脚=（）=>{
返回(
你好
);
};
导出默认页脚；

对于

样式化组件

，您不应该使用类来设置元素的样式。您应该为组件使用单独的包装器，这是要点。我想你想做这样的事情：

import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';

const StyledNavbar = styled(Navbar)`
  background-color: black;
  position: absolute;
  bottom: 0;
  width: 100%;
`;

const Header = styled.h1`
  color: white;
`;

const Footer = () => {
  return (
    <StyledNavbar>
      <Container>
        <Row>
          <Col sm={{ size: 4 }}>
            <Header>Hi</Header>
          </Col>
        </Row>
      </Container>
    </StyledNavbar>
  );
};

export default Footer;

从“React”导入React；
从“reactstrap”导入{Navbar，Container，Row，Col}；
从“样式化组件”导入样式化；
const StyledNavbar=已设置样式（导航栏）`
背景色：黑色；
位置：绝对位置；
底部：0；
宽度：100%；
`;
const Header=styled.h1`
颜色：白色；
`;
常量页脚=（）=>{
返回(
你好
);
};
导出默认页脚；

您能提供更多解决方案的详细信息吗？我是CSS.h1新手，因为类类似于

hi

。类是标记上的选择器/属性。这个标签是一个h1Using styled.h1需要我定义另一个变量，不能在styled.div中定义它吗？我只需要更改颜色。好的，我添加了

classname='h1'

，但它仍然不起作用。事实上，很抱歉，我认为您不需要其他变量，我将删除它。请看我上面的评论。你能提供更多关于解决方案的细节吗？我是CSS.h1新手，因为类类似于

hi

。类是标记上的选择器/属性。这个标签是一个h1Using styled.h1需要我定义另一个变量，不能在styled.div中定义它吗？我只需要更改颜色。好的，我添加了

classname='h1'

，但它仍然不起作用。事实上，很抱歉，我认为您不需要其他变量，我将删除它。请参阅上面我的评论。因此，如果不定义另一个变量，即

Header

？@Nimrod，这是不可能的，但为什么呢？这是

样式化组件

的要点。因此，如果不定义另一个变量，即

标题

，这是不可能的，但为什么呢？这是

样式化组件的要点。