javascript - 如何使用样式组件显示一些值？

Question

我是样式组件的新手，我有点困惑。我们可以显示一些东西或向 styled-compoentns 添加功能吗？或者 styled-components 是我们只能应用 css 的组件

Answer 1

styled-components 主要用于应用 css。

因此，通常您会使用提供内容的包装器组件，并使用从 styled-components 获得的组件进行装饰。

有时，我发现当内容非常特定于组件时，使用.attrs构造函数进行传递很有用。children

const ResourceMissingError= styled.div.attrs({
    children: 'This resource could not be found'
})`color: red`;

render(<ResourceMissingError />);

Answer 2

我们可以显示一些东西或向样式组件添加功能吗？

是的，样式化的组件可以像任何原生组件一样使用。因此，正如 HTML<button>可用于显示某些内容一样，您可以使用样式按钮来执行此操作。见下文。

类似地，您可以像在原生组件中一样添加功能，例如通过监听点击事件。ColorfulButton下面的演示通过处理其点击事件“添加”功能。

另请参阅颜色如何作为道具传递给ColorfulButtonvia mycolor="green"：

const ColorfulButton = styled.button`
  display: inline-block;
  color: ${props => props.mycolor || "blue"};
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  display: block;
`;

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = { text: "Learn JavaScript (click me)", done: true }
  }
  handleClick = e => {
    this.setState({...this.state, done: !this.state.done});
  }
  
  render() {
    return (
      <div>
        <ColorfulButton onClick={this.handleClick} mycolor="green">{this.state.text}</ColorfulButton>
        <br />
        {this.state.done ? 'Yes' : 'No'}
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

<div id="app"></div>

Answer 3

您可以制作一个 CSS 文件并将其导入到您的不同组件中，例如在 CSS 中制作类，并在您的组件中将该类用作className="". 此外，您可以像这样引用内联 CSS，style={{}}以确保在 React 内联 CSSfont-size中写入属性名称。fontSize每个属性名称中间有破折号的 CSS 属性，破折号将被删除，破折号后面的下一个字母将大写，并且属性值将在双引号或单引号中。