小编Tai*_*ara的帖子

如何在 React 中的切换开关组件内添加文本？

如何在 ReactJS 的 Switch 组件中添加文本？我正在尝试在开关组件内添加文本EN。PT

我没有使用任何库，我只使用 css 构建了组件，因为我需要它进行特定的自定义，所以我发现使用 css 更容易。

我把我的项目放入codesandbox

import React from "react";
import "./switch.css";

const Switch = ({ isOn, handleToggle, onColor }) => {
  return (
    <>
      <input
        checked={isOn}
        onChange={handleToggle}
        className="react-switch-checkbox"
        id={`react-switch-new`}
        type="checkbox"
      />
      <label
        style={{ background: isOn && onColor }}
        className="react-switch-label"
        htmlFor={`react-switch-new`}
      >
        <span className={`react-switch-button`} />
      </label>
    </>
  );
};

export default Switch;

Run Code Online (Sandbox Code Playgroud)

.react-switch-checkbox {
  height: 0;
  width: 0;
  visibility: hidden;
}

.react-switch-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer; …

Run Code Online (Sandbox Code Playgroud)

html javascript css reactjs

Tai*_*ara

lucky-day

2
推荐指数

1
解决办法

6868
查看次数

如何使用样式组件覆盖material-ui css？

我还是 ui-material 的初学者。我想用styled-component.

问题是根据按钮变体覆盖 css，例如，如果它是primaryor secondary：

这是我在codesandbox.io中的代码

import React from "react";
import PropTypes from "prop-types";

import { CButton } from "./styles";

const CustomButton = ({ children, color }) => {
  return (
    <div>
      <CButton variant="contained" color={color}>
        {children}
      </CButton>
    </div>
  );
};

CustomButton.propTypes = {
  children: PropTypes.node,
  color: PropTypes.oneOf(["primary", "secondary"])
};

export default CustomButton;

Run Code Online (Sandbox Code Playgroud)

import styled, { css } from "styled-components";
import Button from "@material-ui/core/Button";

export const CButton = styled(Button)`
  height: 80px;

  ${({ color }) …

Run Code Online (Sandbox Code Playgroud)

javascript css reactjs material-ui styled-components

Tai*_*ara

2021 07-05

2
推荐指数

1
解决办法

2万
查看次数